我们在写项目的时候，如果查看各个运行环境的时候，一边想看看开发环境一边查看生产环境，但是我们又不想每次都去config文件修改模式，那我们可以通过以下方式进行修改，做到一个命令查看不同环境的代码情况。
我们先常规的新建一个webpack项目，先新建一个项目文件夹，并运行以下命令
1 => npm init -y //格式化项目
2 => npm install webpack webpack-cli -g //全局配置webpack和webpack的脚手架
3 => npm install html-webpack-plugin // 生成html文件
4 => npm install webpack-dev-server //热更新
5 => npm install webpack-merge //拆分与合并配置需要的工具
然后我们有下面一个基础项目，有以下几个文件
我们看一下src下面的几个文件配置
然后我们开始注意下面的webpack.config.js这个文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main:'./src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname,'mybuild')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode:"development"
}
上面我进行了这些配置
- entry：入口函数
- output：打包后的位置以及名字
- plugins：html文件
- mode：打包模式
文件配置如下
然后输入打包命令
npm run dev
我们看一下打包后
上面我用到的mode是开发环境，但是有时候我们苦恼就是，能不能一个命令解决这种烦恼，既方便我们开发环境也方便我们生成环境。比如代码要上线什么的。然后我们可以使用webpack-merge进行以下操作了
为了将开发环境和生产环境的公共配置抽离出来，然后基于公共配置通过webpack-merge合并开发或者生产环境的特有配置，生成完整的开发或者生产环境配置，所以我们可以进行以下配置
建一个文件夹build然后有以下配置文件
然后我们可以将webpack.config.js文件进行抽离做以下配置，下面各个文件的内容配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main:'./src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname,'mybuild')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
上面是基本文件配置没什么变化
开发环境
const commonConfig = require('./webpack.base.config');
const { merge } = require('webpack-merge');
const devConfig = {
mode: "development"
}
module.exports = merge(commonConfig,devConfig)
生产环境
const commonConfig = require('./webpack.base.config');
const { merge } = require('webpack-merge');
const proConfig = {
mode: "production"
}
module.exports = merge(commonConfig,proConfig)
以上，我们可以通过运行不同的命令来区分生产环境与开发环境
开发环境：npm run build:dev
生产环境：npm run build
我们可以通过以上的merge方法就可以分出是否生产环境与开发环境，方便我们观察代码
