文章目录
1.为什么要分离配置文件
在我们开发过程中，经常在webpack.config.js文件中配置很多东西，不管是开发环境下，还是生产环境下。但是当我们在生产环境下打包时，其实很多我们开发环境下的配置时用不到的。那么当我们把所有的配置写在一个文件中时，那是不太稳妥的。
因此我们需要抽离配置文件。
2.实施
我们需要安装webpack-merge插件
npm install webpack-merge --save-dev
接着分离文件，将配置文件分为三个文件，分别时base.config、pron.config、dev.config
其作用为
base.config：公共配置抽离部分
pron.config：生产环境相关配置
dev.config： 开发环境相关配置
接着我们可以使用merge进行配置文件的合并：
dev.config.js文件代码
const webpackmerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackmerge(baseConfig, {
devServer: {
contentBase: path.resolve(__dirname, 'build'),
inline: true,
open: true
}
})
prod.config.js文件代码
const webpackmerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports=webpackmerge(baseConfig,{
mode: 'development'
})
base.config.js文件代码：
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, '../build')
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin('版权所有所有:小牲口online'),
new HtmlWebpackplugin({
template:'./index.html'
})
],
}
最后我们还需要在package.json中配置打包时如何执行配置文件，因为webpack默认是只识别webpack.config.js配置文件的。
"build": "webpack --config ./config/prod.config.js",
"dev":"npx webpack serve --config ./config/dev.config.js"
因为我这里使用的是webpack5以上的版本，因此dev-server的启动方式和webpack5以下的有所不同，详细可见官网
https://webpack.js.org/configuration/dev-server/#root
这时我们的配置文件就算是配置成功了。
3.总结
虽然我们使用了三个文件来进行配置，而webpack.config.js只用了一个文件来进行配置，仿佛更加麻烦了，实际上在开发中，我们需要配置大量的内容，生产和开发分离是可取的，也是一种优化的写法。如果你阅读过vue-cli脚手架构建的项目会发现其中webpack构建部分使用的就是此方法