Webpack5 - 区分开发和生产环境配置

一. webpack 不同环境的配置

对于项目的开发和生产打包，这两种情况下，我们通常需要不同的webpack配置。

有如下两种方法，可以针对不同环境 应用不同的 webpack 配置。

二. 方法一 根据环境不同导出不同的配置

webpack.config.js: 

module.exports = (env, argv) => {
    const config = {...}

    if(env && env.production) {

        config.mode = 'production'
        config.devtool = 'none'
        config.plugins = [
            ...config.plugins,
            new CleanWebpackPlugin(),
            new CopyPlugin({
                patterns: [
                    { from: 'public', to: 'public' },
                ]
            }),
        ]
    }

    return config;
}

  执行生产打包：

yarn webpack --env production

三. 方法二 不同环境对应不同的配置文件

此时，需要三个配置文件：

webpack.common.js

webpack.dev.js

webpack.prod.js

1. webpack.common.js 开发和生产的通用配置

2. webpack.dev.js 和 webpack.prod.js，合并通用配置并设置自己的配置

  如：webpack.prod.js：

const common = require('./webpack.common.js')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = merge(common, {
    // mode: 'production',
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'public', to: 'public' },
            ]
        })
    ]
})

module.exports = config;

3. 打包命令：

yarn webpack --config webpack.prod.js  // 生产打包

yarn webpack --config webpack.dev.js   // 开发打包

本文 完。