Webpack 不同环境下的配置

配置文件根据环境不同导出不同配置

webpack配置文件支持导出一个函数，在这个函数当中返回我们所需要的配置对象，这个函数可以接收到两个参数。
第一个参数env，也就是我们通过cli传递的一个环境名参数
第二个参数argv，是指我们运行过程中cli传递的所有参数。

module.exports = (env, argv) => {
    // 基础配置
    const config = {
        mode:"none",
        ...
    }
    if(env === "production"){ 
        console.log('生产环境');
        config.mode = 'production'
        config.devtool = false // 禁用sourcemap
        config.plugins = [
            ...config.plugins,
            new CleanWebpackPlugin(),
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from:"images",
                        to:"images"
                    }
                ]
            }),
        ]
    }
    return config;
}

一个环境对应一个配置文件

采用多配置文件的方式，根据自己的需要，指定一个配置文件来执行打包。
例如有三个配置文件，webpack.common.js、webpack.dev.js、webpack.prod.js。webpack.common.js中写一些公共的配置，webpack.dev.js写开发环境的配置，webpack.prod.js写生产环境的配置。

// webpack.common.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js", // 指定打包入口文件的路径,注意,如果这里的路径是相对路径, ./是不能省略的
    output: { // 通过output属性设置输出文件位置,output的值要求是一个对象
        filename: "bundle.js", // 通过filename指定输出文件名称
        path: path.join(__dirname, "dist"), // 通过path属性指定输出文件的目录,需要输入一个绝对路径
    },
    module: {...},
    plugins: [
        new HtmlWebpackPlugin(...)
    ]
}

// webpack.prod.js
// 引入webpack.common.js内容
const common = require("./webpack.common")
// 引入生产环境需要的插件
const CopyWebpackPlugin = require("copy-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
// 使用merge实现对配置的合并操作，因为Object.assign方法会将前面的同名属性直接覆盖，而我们只是希望添加一些插件，所以我们需要借助于webpack-merge模块来满足我们合并plugins的需求
const { merge } = require("webpack-merge")
module.exports = merge(common, {
    mode:"production",
    devtool: false,
    plugins:[
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({ 
            patterns: [
                {
                    from:"images",
                    to:"images"
                }
            ]
        })
    ]
})