实际项目运用中,打包到生产环境的代码跟开发环境的代码的需求是不一样的,一个很简单的例子
一般情况下,webpack的mode是production模式的,打包出来的js文件是经过压缩的,这适用于生产环境;但是开发环境我们需要的是用development的;
在实际的开发的时候,前后端联调的时候也会根据不同的环境,比如开发环境,测试环境,正式生产环境配置不同的域名;
结合各种情况,给不同的环境配置不同的打包文件是有必要的;
首先看一下,package.json里是怎么给不同的指令,指定不同的webpack配置文件的
{
"scripts": {
"dev": "webpack --config ./build/webpack.config.js",
"build": "webpack --config ./build/webpack.build.js"
},
}
执行npm run dev的时候,执行的是build/webpack.config.js里面的配置;
虽然说不同的生产环境需要不同的配置,但是一般我们还是需要有一些公共的部分的,先抽离出来
webpack.common.js
const Path = require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports={
entry: {
index:'./src/index.js'
},
output:{