避免 loader 的 include 和 exclude 同时使用引起的陷阱

2023-12-30 14:21:46

前言

Webpack 是一个流行的模块构建工具，可以将各种类型的文件（如 JavaScript、CSS、图像等）打包成单个或多个文件。在 Webpack 中，loader 用于处理不同类型的文件，并将其转换为所需的格式。include 和 exclude 选项允许您指定要处理的文件和要排除的文件。

案例分析

某日，项目中 Jenkins 构建之后，构建输出中显示有错误，输出如下：

ERROR in ./src/components/Button.js 4:22-30
Module parse failed: Unexpected token (4:22)
File was processed by: webpack/lib/javascript/babel-loader.js
You may need an appropriate loader to handle this file type.

从输出上看，是 UglifyJs 报错了，还是语法错误。先找打包后的代码看看 dist/static/js/hotTemp。

(function (module, exports, __webpack_require__) {
  // ...
});

发现是 UglifyJs 把代码给压缩混淆了，把 export 给去掉了，导致 JavaScript 引擎无法解析。

解决方案

究其原因，是因为在 Webpack 配置中，同时使用了 include 和 exclude 选项，导致 UglifyJs 无法正确处理 Button.js 文件。具体来说，在 webpack.config.js 文件中，配置如下：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/components'),
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'uglifyjs-webpack-plugin',
          },
        ],
      },
    ],
  },
  // ...
};

在这个配置中，include 选项指定了要处理的文件，而 exclude 选项指定了要排除的文件。问题是，Button.js 文件同时满足 include 和 exclude 两个条件，导致 UglifyJs 无法确定是否要处理此文件。最终，UglifyJs 决定不处理此文件，从而导致了语法错误。

为了解决这个问题，可以将 include 和 exclude 选项分开使用。具体来说，可以将 include 选项用于指定要处理的文件，而将 exclude 选项用于排除不需要处理的文件。这样，就可以确保 UglifyJs 能够正确处理 Button.js 文件。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/components'),
        ],
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
        use: [
          {
            loader: 'uglifyjs-webpack-plugin',
          },
        ],
      },
    ],
  },
  // ...
};