webpack4 无法添加 WebpackChunkName 注释的 bug 解决？-JavaScript中文网-JavaScript教程资源分享门户

背景

经过不断的发展，Web 前端的技术栈也在不断地更新，而 webpack 作为前端开发中不可或缺的一部分，也在不断地更新。webpack 4 是目前最新的版本，它提供了更快的构建速度和更细致的调试信息，同时也支持了很多新的特性。

其中，webpack 的代码分割功能是前端开发中常用的一个功能，可以将一些长时间未使用的代码打包到单独的文件中，减小总体的代码体积。而为了更好的管理这些文件，webpack 提供了 WebpackChunkName 注释，可以在代码中添加注释来为这些文件命名。然而，在 webpack 4 中，添加 WebpackChunkName 注释可能会出现一些问题，这一点在使用 vue-cli 3.x 进行开发时尤为明显。

问题分析

在 webpack 4 中使用 WebpackChunkName 注释时，有时会出现无法正确命名的情况。例如，我们编写以下代码：

import(/* webpackChunkName: "chunk-test" */ './test')

期望上面的代码会将 ./test 打包为一个名为 chunk-test.js 的文件，然而，实际上并不会。为什么呢？

首先，我们需要了解这些 WebpackChunkName 注释是如何生效的。在打包过程中，webpack 会解析代码中的注释，并根据注释中的内容来命名 chunk。而在 webpack 4 中，这个过程有些不同。它使用了一个叫做“optimization”（优化）的功能来处理打包过程中的各种优化。其中，有一个叫做“chunkNames”（块名称）的优化配置选项，我们需要在这个选项中为 WebpackChunkName 注释配置一个正则表达式规则。这里是一个示例配置：

// www.javascriptcn.com code example
module.exports = {
  // ...省略其他配置
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
    chunkIds: 'named',
    chunkNames: {
      // 使用正则来确定文件名称
      main: 'main',
      vendor: 'vendor',
      common: /common|app/,
    },
  },
  // ...省略其他配置
}

上述配置中，在 chunkNames 中，我们配置了三个正则表达式来确定 chunk 的名称：

main：匹配名称为 main 的 chunk。
vendor：匹配名称为 vendor 的 chunk。
common：匹配名称为 common 或者 app 的 chunk。

其中，我们也可以增加 /.*/ 匹配所有其他的 chunk。

在 webpack 4 中，由于默认情况下使用的是 /[\\/]node_modules[\\/]/ 规则来命名 chunk，因此如果我们仅仅使用 WebpackChunkName 注释来命名 chunk，可能就不能生效。

解决方案

为了解决这个问题，我们需要在 webpack 的配置选项中增加一个 chunkNames 的配置项，并为其增加一个正则表达式规则。这个正则表达式规则必须包含我们使用 WebpackChunkName 注释来命名 chunk 的关键词。

例如，如果我们代码中的注释为：

import(/* webpackChunkName: "chunk-test" */ './test')

那么我们的正则表达式就应该包含 test，如下所示：

// www.javascriptcn.com code example
module.exports = {
  // ...省略其他配置
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
    chunkIds: 'named',
    chunkNames: {
      // 使用正则来确定文件名称
      main: 'main',
      vendor: 'vendor',
      common: /common|app|test/,
    },
  },
  // ...省略其他配置
}

上述配置中，我们在 common 规则中增加了 test 关键词，来确保我们代码中的 WebpackChunkName 注释可以被正确解析。

指导意义

在实际开发中，我们通常会使用 Vue.js 或者 React.js 等框架来辅助我们进行前端开发。这些框架通常已经为开发者配置好了一些默认的 webpack 配置，以方便我们的开发工作。然而，有时我们需要自定义一些配置项，例如使用 WebpackChunkName 注释来命名 chunk，这就需要我们对 webpack 的原理和配置有一定的了解。

在这篇文章中，我们详细分析了 webpack 中 WebpackChunkName 注释无法生效的原因，并提供了解决方案。这对于正在使用 webpack 进行前端开发的开发者来说，具有一定的参考和指导意义。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ce5c18e46428fe9e8838f2

webpack4 无法添加 WebpackChunkName 注释的 bug 解决？

背景

问题分析

解决方案

指导意义

接着读