webpackchunkname（webpackchunkname按需加载）

简介：

Webpack是一款强大的JavaScript模块打包工具，可以将模块打包成单个文件，使得前端项目简单易维护。而webpack可以对不同模块进行打包分离，这就需要使用到webpackChunkName这个属性。

多级标题：

一、什么是webpackChunkName

二、如何使用webpackChunkName

三、webpackChunkName实战

一、什么是webpackChunkName

webpackChunkName是Webpack中的一个属性，可以用于给异步模块命名。当Webpack打包时，异步的模块或者文件会被打包成一个chunk（或者说是一个文件）。这个chunk的命名，默认是由一串数字和字母组成，是不太容易阅读的。但是，通过使用webpackChunkName，我们可以命名这个chunk，这样可以更容易地识别和查找。

二、如何使用webpackChunkName

使用webpackChunkName只需要在使用import()、require.ensure()或者dynamic import的时候添加注释即可。

例如：

```javascript

import(/* webpackChunkName: "my-chunk-name" */'./my-module.js')

```

```

require.ensure([], function(require){

require("./my-module.js");

}, 'my-chunk-name');

```

```

async function myFunc() {

const myModule = await import(/* webpackChunkName: "my-chunk-name" */ './my-module.js');

console.log(myModule);

```

可以看到，我们在注释中添加了webpackChunkName: "my-chunk-name"，这样webpack就会使用设定的名称来命名chunk。

三、webpackChunkName实战

下面我们来看一个简单的webpackChunkName实战，假设我们有一个页面，其依赖于一个大文件big.js和一个小文件small.js。其中，big.js文件很大，希望将其打包到单独一个chunk中，而small.js文件是与页面相关联的代码，希望与页面代码一起打包到同一个chunk中。

我们可以这样去使用webpackChunkName：

```javascript

import(/* webpackChunkName: "big-js" */'./big.js')

import(/* webpackChunkName: "page-related" */'./small.js')

```

这样webpack会根据注释内的webpackChunkName，将big.js打包成一个名称为big-js的chunk，而将small.js和页面代码打包到了一个名称为page-related的chunk中。这样我们可以通过chunk的名称，更好地维护和查看代码结构。

总结

webpackChunkName是Webpack中的一个魔术属性，主要用于给异步模块或者文件命名。通过使用webpackChunkName，我们可以更好地维护和查看代码结构。当然使用时要注意，不正确的使用会导致代码分离失败，所以需要慎重使用。