Webpack是一个现代JavaScript应用程序的静态模块打包器，它在构建前端项目时起到了至关重要的作用。在Webpack中，代码分割是一项关键功能，它能够将代码库分割成多个包，按需加载，优化了应用程序的加载时间和性能。在Webpack 4中，动态切割JS文件并注入自定义文件名的能力变得更加灵活和强大，本文将详细介绍如何在Webpack 4中实现这一功能。
Webpack 4引入了对代码分割的内置支持，通过import()函数实现了所谓的“动态导入”。动态导入允许我们在运行时决定是否加载某个模块。Webpack会自动处理模块分割的工作。在Webpack 4中，可以通过magic comments（魔法注释）来指定分割后的chunk名称。
所谓“魔法注释”指的是在import语句上方使用特定格式的注释来影响Webpack的打包行为。一个典型的魔法注释如下所示：
```javascript
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "weak" */
/* webpackPrefetch: true */
/* webpackPreload: true */
/* webpackInclude: /\.js$/ */
/* webpackExclude: /\.css$/ */
'module'
)
```
其中`webpackChunkName`用于自定义生成的chunk的名称，替代默认的数字编号形式。这样做的好处是，当开发者查看网络请求时，能够明确知道请求的资源名称，而不必猜测`0.js`或`1.js`等可能是哪个模块。
在文章提供的示例中，使用了`[request]`作为占位符，其能够捕获到实际解析的文件名，从而动态地为每个分割的chunk指定名称。具体实现方式如下：
```javascript
const IntroRegister = categoryName => {
return () => import(/*webpackChunkName:"[request]"*/ `@/views/${categoryName}/intro-register/intro-register.vue`);
};
```
这段代码意味着，将根据`categoryName`动态地生成不同的chunk名称，这有助于在项目中保持资源名称的清晰和有序，尤其是在大型项目中，这样做的好处是显而易见的。
在实际应用中，Webpack会根据这些配置信息，自动将特定的模块分割成独立的文件，并在HTML文件中注入相应的<script>标签。例如，根据上述代码，Webpack可能生成一个文件名为`intro-register chunk name].js`的文件，并将其自动引入到HTML中。
此外，Webpack还提供了其他的魔法注释，例如：
- `webpackMode`: 指定分割策略，如`"weak"`或`"lazy"`, 默认为`"lazy"`。
- `webpackPrefetch`: 指示浏览器在空闲时预先加载该模块。
- `webpackPreload`: 指示浏览器在加载主程序时同时加载该模块。
- `webpackInclude`: 仅包含指定的文件。
- `webpackExclude`: 排除指定的文件。
这些魔法注释的使用为开发者提供了更多的灵活性，允许开发者根据具体的需求进行优化。
总结起来，Webpack 4的动态切割JS文件注入文件名的能力，使得资源管理更为直观和有序。通过合理利用魔法注释来控制chunk的命名，开发者可以在维护大型项目时提高代码的可读性和可维护性。同时，Webpack的动态导入功能和魔法注释的结合使用，将有助于提升应用的加载性能和用户体验。
