webpack怎么根据不同环境给不同的打包配置（基于webpack4.0）

实际项目运用中，打包到生产环境的代码跟开发环境的代码的需求是不一样的，一个很简单的例子
一般情况下，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:{