webpack之生产环境和开发环境

webpack之生产环境和开发环境

webpack之在webpack.config.js中获取打包命令中的env字段

想要接收到命令中的env字段，webpack.config.js中导出的必须是一个函数，函数的参数就是外界命令的env字段，函数的返回值就是webpack的配置项

    npx webpack --env goal=local --env production

    // webpack.config,js
    module.exports = (env) => {
        console.log('Goal: ', env.goal); // 'local'
        console.log('Production: ', env.production); // true
        return {
            ...
            output: {
                ...
            }
        }
    }

生产环境下的一些配置

在生产环境下，代码会自动的进行压缩（css和js都会进行压缩）。开发环境下，除非你进行配置，否则不会进行压缩。在生产环境下如果你只想要css或者js进行压缩，那么你需要配置

    // webpack.config,js
    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');     // 需要安装
    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = (env) => {
        optimization: {
            minimizer: [
                new CssMinimizerPlugin();       // 压缩css
                new TerserPlugin();             // 压缩js
            ]
        }
    }