vue-cli的webpack-chain链式配置
vue.config.js中webpack链式配置
·
webpack-chain需要 Node.js 12 或更高版本。webpack-chain也只创建设计用于 webpack 4 的配置对象。
你可以使用 Yarn 或 npm 安装这个包(选择一个):
npm install --save-dev webpack-chain
安装完成后,您webpack-chain可以开始创建 webpack 配置。对于本指南,我们的示例基本配置将webpack.config.js位于项目目录的根目录中。
// Require the webpack-chain module. This module exports a single
// constructor function for creating a configuration API.
const Config = require('webpack-chain');
// Instantiate the configuration with a new API
const config = new Config();
// Make configuration changes using the chain API.
// Every API call tracks a change to the stored configuration.
config
// Interact with entry points
.entry('index')
.add('src/index.js')
.end()
// Modify output settings
.output
.path('dist')
.filename('[name].bundle.js');
// Create named rules which can be modified later
config.module
.rule('lint')
.test(/\.js$/)
.pre()
.include
.add('src')
.end()
// Even create named uses (loaders)
.use('eslint')
.loader('eslint-loader')
.options({
rules: {
semi: 'off'
}
});
config.module
.rule('compile')
.test(/\.js$/)
.include
.add('src')
.add('test')
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['@babel/preset-env', { modules: false }]
]
});
// Create named plugins too!
config
.plugin('clean')
.use(CleanPlugin, [['dist'], { root: '/dir' }]);
// Export the completed configuration object to be consumed by webpack
module.exports = config.toConfig();
使用 和 的实例时ChainedMap,ChainedSet您可以使用 执行条件配置when。您必须指定一个表达式 when(),将对其进行真假评估。如果表达式为真,第一个函数参数将使用当前链接实例的实例调用。您可以选择在条件为假时提供要调用的第二个函数,该函数也给出了当前链接的实例。
// Example: Only add minify plugin during production,
// otherwise set devtool to source-map
config
.when(process.env.NODE_ENV === 'production',
config => config.plugin('minify').use(BabiliWebpackPlugin),
config => config.devtool('source-map')
);
更多推荐
已为社区贡献1条内容
所有评论(0)