Webpack 中如何配置 mode？

推荐答案

在 Webpack 中，mode 是一个重要的配置项，用于指定当前的构建模式。它可以通过以下两种方式进行配置：

1. 在配置文件中设置： 在 webpack.config.js 文件中，可以通过 mode 属性来指定模式。例如：

   module.exports = {
     mode: 'production', // 或者 'development'
     // 其他配置项
   };

2. 通过命令行参数设置： 在运行 Webpack 时，可以通过命令行参数 --mode 来指定模式。例如：

   webpack --mode=production

   webpack --mode=development

本题详细解读

mode 的作用

mode 配置项用于指定 Webpack 的构建模式，主要有以下三种模式：

• production：生产模式。Webpack 会自动启用一些优化策略，如代码压缩、Tree Shaking 等，以生成更小的输出文件。
• development：开发模式。Webpack 会启用一些开发工具，如 source map，以便于调试。
• none：不使用任何默认优化选项。

mode 的默认行为

• 如果未指定 mode，Webpack 会默认使用 production 模式。
• 在 production 模式下，Webpack 会自动启用 TerserPlugin 进行代码压缩，并启用 ModuleConcatenationPlugin 进行模块合并。
• 在 development 模式下，Webpack 会启用 NamedChunksPlugin 和 NamedModulesPlugin，以便更好地调试代码。

示例

1. 在配置文件中设置 mode

module.exports = {
  mode: 'production', // 生产模式
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

2. 通过命令行参数设置 mode

webpack --mode=development

注意事项

• 如果同时通过配置文件和命令行参数设置了 mode，命令行参数的优先级更高。
• 在 production 模式下，Webpack 会自动启用一些优化插件，因此不需要手动配置这些插件。
• 在 development 模式下，Webpack 会生成更详细的 source map，以便于调试。

通过合理配置 mode，可以更好地控制 Webpack 的构建行为，从而优化开发和生产环境下的构建结果。