面试题：Webpack CLI 脚手架高级功能实现问题

Question

假设项目中需要根据不同的环境（开发、测试、生产），使用 Webpack CLI 脚手架实现差异化的打包配置，比如在生产环境开启代码压缩和优化，开发环境保留详细的 source map。请阐述实现思路，并给出关键的配置代码。

Answer 1

实现思路

1. 创建不同环境的配置文件：在项目根目录下创建webpack.dev.js、webpack.test.js和webpack.prod.js分别对应开发、测试和生产环境的配置。
2. 使用 webpack - merge 合并通用配置：将通用的配置提取到webpack.common.js，然后使用webpack - merge工具将通用配置与不同环境的特定配置合并。
3. 通过脚本执行不同环境的打包：在package.json中定义不同环境的打包脚本，调用webpack - cli根据不同环境执行打包。

关键配置代码

1. 通用配置 webpack.common.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset - env']
                    }
                }
            }
        ]
    }
};

2. 开发环境配置 webpack.dev.js

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

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline - source - map'
});

3. 生产环境配置 webpack.prod.js

const merge = require('webpack - merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const TerserPlugin = require('terser - webpack - plugin');

module.exports = merge(common, {
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true
                    }
                }
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css'
        })
    ]
});

4. package.json 中的脚本

{
    "scripts": {
        "dev": "webpack - cli --config webpack.dev.js",
        "test": "webpack - cli --config webpack.test.js",
        "build": "webpack - cli --config webpack.prod.js"
    }
}