面试题：Webpack与复杂工具链集成及优化

可能遇到的冲突点及解决方案

ESLint 与 Prettier 规则冲突
- 冲突点：ESLint 和 Prettier 都对代码格式有要求，可能存在规则不一致的情况，例如缩进风格、单双引号使用等。
- 解决方案：
  - 使用 eslint - plugin - prettier 和 eslint - config - prettier。eslint - plugin - prettier 将 Prettier 作为 ESLint 规则运行，eslint - config - prettier 关闭 ESLint 中与 Prettier 冲突的规则。
  - 在 ESLint 配置文件（如 .eslintrc）中添加：

{
  "extends": ["plugin:prettier/recommended"]
}

PostCSS 与 Webpack 配置冲突
- 冲突点：Webpack 中 PostCSS 插件的配置可能与项目中其他 loader 或插件不兼容，例如顺序问题可能导致样式处理异常。
- 解决方案：
  - 确保 PostCSS loader 在 Webpack 配置中正确排序。一般来说，它应该在 css - loader 之后，style - loader 之前（如果使用 style - loader）。例如在 Webpack 的 module.rules 中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style - loader",
          "css - loader",
          {
            loader: "postcss - loader",
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

性能优化冲突
- 冲突点：例如为了提高样式处理性能，可能过度压缩 CSS，导致某些浏览器兼容性问题；或者 ESLint 规则过于严格影响开发效率。
- 解决方案：
  - 对于 CSS 压缩，使用 css - minimizer - webpack - plugin 并配置合适的压缩选项。例如：

const CssMinimizerPlugin = require('css - minimizer - webpack - plugin');
module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

 - 对于 ESLint，可以在开发环境下使用宽松一些的规则集，在生产环境下使用严格规则。可以通过不同的 `.eslintrc` 文件或在配置中根据环境变量动态调整规则。

Webpack 配置优化

开发环境配置
- 启用热模块替换（HMR）：在 Webpack 配置中添加 devServer.hot: true。例如：

module.exports = {
  devServer: {
    hot: true
  }
};

优化 loader 缓存：许多 loader 支持缓存，例如 babel - loader 可以设置 cacheDirectory: true。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel - loader",
          options: {
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

生产环境配置
- 代码压缩：使用 terser - webpack - plugin 压缩 JavaScript 代码，结合 css - minimizer - webpack - plugin 压缩 CSS 代码。

const TerserPlugin = require('terser - webpack - plugin');
const CssMinimizerPlugin = require('css - minimizer - webpack - plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  }
};

分离 CSS：使用 mini - css - extract - plugin 将 CSS 从 JavaScript 中分离出来，避免样式闪烁。

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css - loader", "postcss - loader"]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

星途面试题库

面试题：Webpack与复杂工具链集成及优化

知识考点

面试题答案

可能遇到的冲突点及解决方案

Webpack 配置优化