webpack必知必会

细节

url-loader和file-loader是什么关系？

1. 文件大小小于limit参数，url-loader将会把文件编码为DataURL；
2. 文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

compiler和compilation

不加hash、hash、contenthash和chunkhash的区别

• hash是compilation对象生成的hash值，每次项目有所改动该对象就会重新生成一次，意味着任意一个文件的改动都会改变hash
• chunkhash也根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值，不同的入口文件的chunkhash不同，但是同一个入口分离的css和js拥有相同的chunkhash并相互影响。chunkhash只会监测import和require引入的文件是否改变，不会监测css的@import引入。意味着@import引入的css改变了，但是chunkhash不会变。
• 每个文件根据内容生成的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。

webpack构建流程

1. 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
2. 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
3. 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
5. 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
6. 输出所有chunk到文件系统。

html-webpac-plugin

new HtmlWebpackPlugin({
    filename: '', // 文件名及路径
    template: '', // 模板
    chunk: [''], // 包含指定的打包后文件，否则默认为注入所有文件
})

优化

url-loader

将基础库抽离打包到单文件

CommonsChunkPlugin

参考资料：

• Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有