Webpack Scaffold webpackOptions merge 不起作用,为什么?
Webpack Scaffold webpackOptions merge not work, why?
所以在教程webpack-scaffold-demo之后,我的webpack.config.js应该和webpack.dev.js[=40=合并]和webpack.pro.js,但这里没有添加merge。
我试图在示例中将其作为对象直接传递,然后我尝试将其作为函数传递并尝试使用 class 但不幸的是他没有将我的 merge with common 添加到我的其他配置中.
依赖关系 (package.json)
"@webpack-cli/webpack-scaffold": "^0.1.2",
"yeoman-generator": "^3.1.1"
generator.js
// Yeoman
const Generator = require( 'yeoman-generator' );
// Scaffold
const List = require( '@webpack-cli/webpack-scaffold' ).List;
const Input = require( '@webpack-cli/webpack-scaffold' ).Input;
// Default abstracted configs
const createCommonConfig = require( './common-config' );
const createProConfig = require( './pro-config' );
const createDevConfig = require( './dev-config' );
module.exports = class WebpackGenerator extends Generator {
constructor( args, opts ) {
super( args, opts );
opts.env.configuration = {
config: {
webpackOptions: {}
},
dev: {
webpackOptions: {}
},
pro: {
webpackOptions: {}
}
}
}
prompting() {
return this.prompt(
[
List( 'confirm', 'Welcome to the tnado Scaffold! Are you ready?', ['Yes', 'No', 'tnado'] ),
Input( 'entry', 'What is the entry point in your app?' )
]
).then( answer => {
if ( answer['confirm'] === 'tnado' ) {
// Common
this.options.env.configuration.config.webpackOptions = createCommonConfig( answer );
this.options.env.configuration.config.topScope = [
'const path = require("path")',
'const webpack = require("webpack")'
];
this.options.env.configuration.config.configName = 'config'; // Manipulate name
// DEV
this.options.env.configuration.dev.webpackOptions = {
mode: "'development'",
merge: 'common'
};
this.options.env.configuration.dev.topScope = [
'const path = require("path")',
'const webpack = require("webpack")',
'const merge = require("webpack-merge")',
'let common = require("./webpack.config.js")'
];
this.options.env.configuration.dev.configName = 'dev'; // Manipulate name
// PRO
this.options.env.configuration.pro.webpackOptions = new createProConfig( answer );
this.options.env.configuration.pro.topScope = [
'const merge = require("webpack-merge")',
'let common = require("./webpack.config.js")'
];
this.options.env.configuration.pro.configName = 'pro'; // Manipulate name
}
} );
}
writing() {
this.config.set( 'configuration', this.options.env.configuration );
}
};
已创建所有文件,并且还添加了 topScopes,只是未添加合并。
我的 webpack.dev.js 结果:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');
module.exports = {
mode: 'development'
而我想要的是:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');
module.exports = merge( common, {
mode: 'development'
如果有人能提供帮助,将不胜感激。
解决方法:
this.options.env.configuration.dev.merge = 'common';
拉取请求:
https://github.com/webpack/webpack-cli/pull/747/files
合并拉取请求:
https://github.com/webpack/webpack-cli/blob/master/SCAFFOLDING.md#myobjmerge-optional
所以在教程webpack-scaffold-demo之后,我的webpack.config.js应该和webpack.dev.js[=40=合并]和webpack.pro.js,但这里没有添加merge。
我试图在示例中将其作为对象直接传递,然后我尝试将其作为函数传递并尝试使用 class 但不幸的是他没有将我的 merge with common 添加到我的其他配置中.
依赖关系 (package.json)
"@webpack-cli/webpack-scaffold": "^0.1.2",
"yeoman-generator": "^3.1.1"
generator.js
// Yeoman
const Generator = require( 'yeoman-generator' );
// Scaffold
const List = require( '@webpack-cli/webpack-scaffold' ).List;
const Input = require( '@webpack-cli/webpack-scaffold' ).Input;
// Default abstracted configs
const createCommonConfig = require( './common-config' );
const createProConfig = require( './pro-config' );
const createDevConfig = require( './dev-config' );
module.exports = class WebpackGenerator extends Generator {
constructor( args, opts ) {
super( args, opts );
opts.env.configuration = {
config: {
webpackOptions: {}
},
dev: {
webpackOptions: {}
},
pro: {
webpackOptions: {}
}
}
}
prompting() {
return this.prompt(
[
List( 'confirm', 'Welcome to the tnado Scaffold! Are you ready?', ['Yes', 'No', 'tnado'] ),
Input( 'entry', 'What is the entry point in your app?' )
]
).then( answer => {
if ( answer['confirm'] === 'tnado' ) {
// Common
this.options.env.configuration.config.webpackOptions = createCommonConfig( answer );
this.options.env.configuration.config.topScope = [
'const path = require("path")',
'const webpack = require("webpack")'
];
this.options.env.configuration.config.configName = 'config'; // Manipulate name
// DEV
this.options.env.configuration.dev.webpackOptions = {
mode: "'development'",
merge: 'common'
};
this.options.env.configuration.dev.topScope = [
'const path = require("path")',
'const webpack = require("webpack")',
'const merge = require("webpack-merge")',
'let common = require("./webpack.config.js")'
];
this.options.env.configuration.dev.configName = 'dev'; // Manipulate name
// PRO
this.options.env.configuration.pro.webpackOptions = new createProConfig( answer );
this.options.env.configuration.pro.topScope = [
'const merge = require("webpack-merge")',
'let common = require("./webpack.config.js")'
];
this.options.env.configuration.pro.configName = 'pro'; // Manipulate name
}
} );
}
writing() {
this.config.set( 'configuration', this.options.env.configuration );
}
};
已创建所有文件,并且还添加了 topScopes,只是未添加合并。
我的 webpack.dev.js 结果:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');
module.exports = {
mode: 'development'
而我想要的是:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
let common = require('./webpack.config.js');
module.exports = merge( common, {
mode: 'development'
如果有人能提供帮助,将不胜感激。
解决方法:
this.options.env.configuration.dev.merge = 'common';
拉取请求:
https://github.com/webpack/webpack-cli/pull/747/files
合并拉取请求:
https://github.com/webpack/webpack-cli/blob/master/SCAFFOLDING.md#myobjmerge-optional