面试题：Webpack安装初始化后多环境配置优化

通常会创建三个Webpack配置文件：webpack.common.js、webpack.dev.js 和 webpack.prod.js。

热模块替换（HMR）配置：
```
const webpack = require('webpack');
module.exports = {
  // 其他配置...
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};
```
性能影响：HMR允许在应用程序运行时替换、添加或删除模块，而无需完全刷新页面。这大大加快了开发过程中的反馈速度，因为开发者修改代码后，只需要更新变化的模块，而不是整个页面，节省了重新加载页面的时间，提高开发效率。

代码压缩： Webpack默认使用TerserPlugin进行代码压缩。在 webpack.prod.js 中，可以这样配置：
```
module.exports = {
  // 其他配置...
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true // 移除console.log
          }
        }
      })
    ]
  }
};
```
性能影响：代码压缩通过移除未使用的代码、缩短变量名等方式减小了文件体积，使得浏览器下载资源更快，从而提高了应用程序的加载速度。
Tree - shaking配置：要实现Tree - shaking，需要满足两个条件：使用ES6模块语法（import 和 export），并且使用 mode: 'production'。Webpack在生产模式下会自动启用Tree - shaking。
```
module.exports = {
  mode: 'production',
  // 其他配置...
};
```
性能影响：Tree - shaking能够去除未使用的代码（“死代码”），进一步减小打包后的文件体积，优化了应用程序的加载性能，尤其是在项目引入大型库时，效果更为显著。

可以使用 webpack - merge 工具来合并配置文件。例如，在 package.json 中添加脚本：

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

在 webpack.dev.js 和 webpack.prod.js 中使用 webpack - merge：

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

module.exports = merge(common, {
  // 开发或生产环境特有的配置
});

通过上述方式，可以在不重复代码的前提下，针对不同环境进行Webpack配置优化，显著提升项目在不同阶段的性能表现。

星途面试题库