在 webpack.config.js 文件中，有些配置只在开发阶段有用，打包生成最终代码的时候，这个配置就没有用了，比如dev-server。但是有些配置在开发阶段不需要，但是打包的时候需要，比如 uglifyjs-webpack-plugin 插件。如果我们不加分离的都写到这一个文件中，显然不太好。那么接下来我们对这个配置文件进行分离。
步骤一
在项目根目录下创建一个 build 文件夹专门用来存放配置文件，再创建三个js文件，如图所示：
- base.config.js 文件，存放基本配置，开发阶段和生产阶段都需要的配置
- dev.config.js 文件，存放只在开发阶段用到的配置
- prod.config.js 文件，存放只在生产阶段用到的配置
步骤二
现在需要将三个配置文件联系到一起，使用webpack-merge，安装： npm install webpack-merge --save-dev
我的webpack版本是3.6.0，webpack-merge版本是4.2.2
接下来在 dev.config.js 文件和 prod.config.js 文件中使用webpack-merge
// prod.config.js
let UglifyWebpackPlugin = require('uglifyjs-webpack-plugin')
let webpackMerge = require('webpack-merge') //1.引入webpackMerge
let baseConfig = require('./base.config') //2.引入base.config.js
module.exports = webpackMerge(baseConfig,{
//3.使用webpackMerge进行合并
plugins:[
new UglifyWebpackPlugin() //打包阶段才需要压缩js代码
]
})
//dev.config.js
let webpackMerge = require('webpack-merge');
let baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer:{
//这个配置只在开发阶段有用，打包生成最终代码的时候，这个配置就没有用了
contentBase:'./dist',
inline:true,
}
})
步骤三
在 package.json 文件里的scripts中配置命令：
{
//...其它
"scripts": {
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
}
}
- 在执行
npm run build的时候，会使用prod.config.js配置文件 - 在执行
npm run dev的时候，会使用dev.config.js配置文件
另外，注意一下在 base.config.js 中 output 的配置
module.exports = {
entry: './src/main.js',
output: {
//注意这个地方是 ../dist，如果直接写 dist ，它会在build文件夹下生成dist文件夹
path: path.join(__dirname, '../dist'),
filename: 'bundle.js',
}
}
资料
本博客的演示代码下载链接：https://webchang.lanzous.com/iB6Irkh9lpc 密码:f2wn