webpack的配置分离相关(webpack-merge)
webpack的配置分离(webpack-merge)
- webpack中有些配置是开发时需要的(如devServer),有些是发布时需要的(如uglify),我们可将webpack的配置分为不同文件以适应不同需求。
- 用到的webpack插件:webpack-merge (提取公共配置,减少重复配置代码)
1. 分离文件
- build文件夹:放置webpack配置
- base.config.js 公共配置
- dev.config.js 开发时配置
- prod.config.js 生产时配置
2. 安装
npm install --save-dev webpack-merge
3. 文件内容和配置
- 重点语句
- 导入基础配置
const baseConfig = require('./webpack.config');
- 结合基础配置
module.exports = WebpackMerge(baseConfig, {})
- 导入基础配置
-
dev.config.js 开发时配置
//导入基础配置 const baseConfig = require('./webpack.config'); //merge插件 const WebpackMerge = require('webpack-merge'); //当前配置结合base配置 module.exports = WebpackMerge(baseConfig, { devServer: { contentBase: '/dist', inline: true, } });
-
prod.config.js 生产时配置
const baseConfig = require('./webpack.config'); const WebpackMerge = require('webpack-merge'); const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); module.exports = WebpackMerge(baseConfig, { plugins: [ new UglifyjsWebpackPlugin() ] });
-
注意 webpack.config.js 修改output的路径(之前是没有build文件夹的,不然dist会生成到build文件夹下)
- 原 :
path: path.resolve(__dirname, 'dist'),
- 修改为 :
path: path.resolve(__dirname, '../dist'),
- 原 :
4. package.json中给对应命令行添加关于配置文件的设置(--config)
- 重点
--config ./build/prod.config.js
- 修改build命令和dev命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --config ./build/dev.config.js --open"
},