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:{
        filename: '[name]-[hash].js',
        path: Path.resolve(__dirname, '../dist'),
        publicPath:'./',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
}

假如说生产环境我们不想要打包到dist文件夹，要打包到public文件夹

1.首先建立一个webpack.pro.js
2.在package.json配置一个指令：

{
  "scripts": {
    "dev": "webpack --config ./build/webpack.config.js",
    "build": "webpack --config ./build/webpack.build.js"，
    “pro":"webpack --config ./build/webpack.pro.js"//这个是新配置的
  },
}

webpack.pro.js

module.exports={
    output:{
        filename: '[name]-[hash].js',
        path: Path.resolve(__dirname, '../public),
        publicPath:'./',
    }
}

就这样是不行的，我们需要把webpack.common.js和webpack.pro.js里面的内容合并起来，这里就需要用到webpack-merge
添加链接描述

webpack.pro.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

const Path = require('path');

 module.exports = merge(common, {
     mode: 'development',
     output: {
        path: Path.resolve(__dirname, '../public'),
     }
 });