webpack动态加载打包chunk命名
最近，遇到复杂h5页⾯开发，为了优化H5⾸屏加载速度，想到使⽤按需加载的⽅式，减少⾸次加载的JavaScript⽂件体积，于是将处理过程在这⾥记录⼀下，涉及到的主要是以下三点：
使⽤Webpack如何做按需加载
filename和chunkFilename的区别
如何命名chunk的名称(webpackChunkName)
1 使⽤Webpack如何做按需加载
⼤家都知道Webpack是现在流⾏的前端打包编译⼯具，通过模块之间的依赖关系，将代码打包组织到⼀起。Webpack⽬前已经到v4.x，不同版本版⽀持按需加载的⽅式不同，主要有两种：
webpack1.x 中提供了 sure()
webpack2.x 中提供了 import()
// 举例
require('b');
});
webpack 在编译时，会静态地解析代码中的 sure()，同时将[模块b] 添加到⼀个分开的 chunk 当中。这个新的 chunk 会被webpack 通过 jsonp 来按需加载。
为什么说到是静态分析，我们可以看到下⾯的sure语法，第⼆个参数callback就是⼀个回调函数。其中需要注意的是，这个回调函数有⼀个参数require，通过这个require就可以在回调函数内按需引⼊其他模块。值得注意的是，虽然这个require是回调函数的参数"module"，理论上可以换其他名称，但是实际上是不能换的，否则webpack就⽆法静态分析的时候处理它。
dependencies: String[],
callback: function(require){
require('module');
},
errorCallback: function(error){},
chunkName: String
)
import()
要注意的是import() 函数不同于import命令，import 是 ECMAScript 6 Module 的语法，import 是静态执⾏，这⾥不多说，可以去看。
import(specifier)
上⾯代码中，import函数的参数specifier，指定所要加载的模块的位置，⽽且specifier可以是⼀个⽅法，动态的⽣成模块路径。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()函数是 ECMAScript Stage 3 草案阶段的语法；⽤于完成动态加载即运⾏时加载，可以⽤在任何地⽅。import()函数返回的是⼀个Promise。类似于 CommonJs 的 require() ，区别主要是前者是异步加载，后者是同步加载。webpack打包流程 面试
import的应⽤场景有以下三种 (参考⾃ECMAScript 6 ⼊门):
1. 按需加载。import()可以在需要的时候，再加载某个模块
2. 条件加载。import()可以放在if代码块，根据不同的情况，加载不同的模块。
3. 动态的模块路径。import()允许模块路径动态⽣成。
⽤法⼤致如下：
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
⼩结
⽬前我们⽤的⽐较多的是import来做按需加载，模块路径可以动态⽣成，更适合现在的应⽤场景。
filename和chunkFilename的区别
能够打包之后，我们会发现打包出来的chunk的路径和命名是极其简单的1,这样⼦的数字，对于我们要定制路径和名字的话，就会涉及到filename和chunkFilename。
output.filename 决定了每个⼊⼝(entry) 输出 bundle 的名称。
output.chunkFilename 决定了⾮⼊⼝(non-entry) chunk ⽂件的名称。
常⽤的Webpack配置如下
//...
output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].chunk.js',
}
};
filename和chunkFilename对应的结果可以由以下参数拼接或者返回：
模板描述
[hash]模块标识符(module identifier)的 hash
[chunkhash]chunk 内容的 hash
[name]模块名称
[id]模块标识符(module identifier)
[query]模块的 query，例如，⽂件名 ? 后⾯的字符串
[function]⽅法，可以返回⼀个filename字符串
不同的是chunkFilename我们不能想filename中的name那样，可以在entry中定义。也就是说对于chunkFilename，默认[id]和[name]是⼀样的，那么如何⾃定义name呢？
如何命名chunk的名称
只能说哪⾥有压迫，哪⾥就会有反抗，chunkFileName不能灵活⾃定义，这谁能忍，于是便有了/* webpackChunkName: "" */，号称是Magic Comments（魔术注释法）。
Webpack通过增加内联注释来告诉运⾏时，该有怎样的⾏为。通过向import中添加注释，我们可以执⾏诸如命名chunk或选择不同模式之类的操作。
这⾥着重讲⼀下webpackChunkName，它其实就是对chunkFilename定义时[name]值的改写，/* webpackChunkName: "hello" */，意味着[name]等于hello。
于是上⾯的代码就会按照下⾯的⽅式来写，打包出来的chunk⽂件将会出现在plugins⽂件夹下，名字叫
myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。
import(/* webpackChunkName: "plugins/myModule" */
'./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
更多的魔术注释，请参考。
结束了
到此为⽌，我们已经可以将代码打包到多个⽂件，每个chunk可以独⽴命名，是的就是这样。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。