面试题：Webpack 如何实现对不同环境下 JavaScript 代码的差异化优化

Question

假设我们的前端项目需要发布到开发、测试、生产三种不同环境，每种环境对 JavaScript 代码的优化需求略有不同，如生产环境需要极致压缩、移除未使用代码等，开发环境需要保留更多调试信息。请详细说明如何利用 Webpack 实现针对不同环境对 JavaScript 代码进行差异化优化，并给出具体的配置思路和示例代码。

Answer 1

配置思路

1. 环境变量定义：通过设置环境变量来区分不同环境，如 NODE_ENV。在开发环境中可以设置为 development，测试环境和生产环境可设置为 production。
2. 多配置文件：使用 Webpack 的多配置文件功能，根据环境变量加载不同的配置文件。每个配置文件针对特定环境对 JavaScript 代码优化进行设置。
3. 优化插件：
   • 开发环境：保留调试信息，使用 source - map 方便调试。可使用 webpack - dev - server 提供热更新等开发辅助功能。
   • 生产环境：使用 TerserPlugin 进行代码压缩，移除未使用代码可以配合 PurgeCSS 插件（若项目中有 CSS 相关内容，JavaScript 部分可通过 Tree - shaking 移除未使用代码，前提是使用 ES6 模块语法等支持 Tree - shaking 的方式）。

示例代码

1. 项目结构

project
│
├── dist
├── src
│   ├── index.js
│   └──...
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── package.json

2. 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']
                    }
                }
            }
        ]
    }
};

3. webpack.dev.js

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

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline - source - map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
    }
});

4. webpack.prod.js

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

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true // 移除 console.log 等调试语句
                    }
                }
            })
        ]
    }
});

5. package.json 中 scripts 配置

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

通过上述配置，执行 npm run dev 会使用开发环境配置，执行 npm run build 会使用生产环境配置，实现了针对不同环境对 JavaScript 代码的差异化优化。