我的webpack4踩坑记丫，彻底搞懂splitChunks和各

2019-10-20 本文已影响0人 liujunyan

1、package.json字段注意点

main字段指明的是当前package.json对应的模块被其他地方require或者import的时候的入口文件

image.png

2、 progress.cwd和__dirname的区别

image.png

3、path, publishPath, contentBase区别

output字段如果设置了publicPath，在使用webpack-dev-server配合html-webpack-plugin的时候，自动引入的文件会加上publicPath前缀，devServer默认使用output的publicPath设置，如果单独设置了devServer的publicPath，则webpack-dev-server打包出的文件输出到devServer.publicPath指定的路径下，但是通过html-webpack-plugin生成的html文件其引入的资源路径还是以output.publicPath为前缀。
contentBase可以理解为webpack-dev-server单独提供多一个静态服务器的功能，然后这个静态服务器是以contentBase指定的目录为根目录的。以下图文理，当访问http://localhost:8081/时，显示的是aaa文件夹下的所有文件或文件夹。

image.png

4、分包机制

在解释webpack的分包机制前有几点默认的点要先说明，后面的分包包括webpack默认的splitChunks配置都是在这个基础上做的。

不做任何配置的时候（包括webpack默认的splitChunk都屏蔽掉啥都不配置的时候）我把它起名为最初的最初🤣entry中配置的入口文件分别对应一个chunk，入口文件里如果异步引入的模块，会单独抽成一个chunk
曾经~我以为所异步引入的模块都会被抽成一个chunk，了不起也就是配置了splitChunks后把几个异步引入的模块打包到同一个抽离出来的chunk里，今天测试发现理解上还是有问题的，结论应该是如异步引入的模块同时又异步引用这个模块的祖先模块引用，那就不会被抽离成单独的chunk，读者可以分别测试如下情况验证（笔者在测试的时候发现这里采用控制变量的实验方法有太多的的情况要测试，一个个全部单独写成配置很有点长，所以下面也是罗列出测试的例子，不贴具体的配置文件的代码了，不过会说明一下测试的时候为了让webpack跑起来踩得一些坑）
1. 入口文件index.js

import React from 'react';
import(/* webpackChunkName: "page" */'react').then(res => {
    console.info(res);
})
console.info(React);

入口文件index.js

// react-dom本身会引用react，这个例子相当于使异步引用的模块同时也引用了一个本身又引用异步引用的模块的模块
// emmmmm有点绕，说白了就是index引用了模块A，A引用了模块B，同时index异步引用了B
import ReactDOM from 'react-dom' 
import(/* webpackChunkName: "page" */'react').then(res => {
    console.info(res);
})
console.info(ReactDOM );

入口文件index.js

import ReactDOM from 'react-dom' 
// 或 import React from 'react' 
import(/* webpackChunkName: "page" */'./page.js')
console.info(ReactDOM);

入口文件index.j异步引用的page.js

import(/* webpackChunkName: "hahaha" */'react').then(res => {
    console.info(res);
})

入口文件index.js

import ReactDOM from 'react-dom' 
// 或 import React from 'react' 
console.info(ReactDOM);
import(/* webpackChunkName: "page" */'./page.js')
// 或者import './page.js'

入口文件index.j异步引用的page.js

import './module.js';

module.js文件

import(/* webpackChunkName: "hehehe" */'react').then(res => {
    console.info(res);
})

以上几种情况，其结果都异步引入的react模块并没有被单独打包到一个chunk中，不信，不信你试下😂

说完了前置的东东，再来看splitChunks的chunks配置，这个配置可选值为async，initial，all。小的我不晓得读者对async的理解是怎样的，不过我一开始是理解错的，还理解错了很久💀导致很多分包的情况看的一脸懵逼，这里稍微提下，一开始我以为async指的是处异步引入的模块这里之所以说我理解错了是指我以为这里处理的是应异步引入的模块本身，而实际情况是处理的是异步引入的模块所依赖的模块，这里也说的有点绕，举例来说就是我有两个入口文件index1.js和index2.js，两个入口文件分别异步引用了jquery，然后我屁颠屁颠的去修改webpack默认使用的splitChunks的配置，将minChunks设置为2，然后觉着这个jquery刚好被两个入口文件异步引用了两次，符合minChunks，按理说应该会被打包到default分组，一跑~傻眼了
image.png
image.png

上面代码截图只看红框就好，中间那一列打开的文件不关事

jquery被打包到了异步引入时写的page的chunk下，并没有被打包到default的chunk下，我就想，为什么不打包到default下啊，不是异步引入么，对应上面写的chunks: 'async'，不是引用了两次么，index1.js一次，index2.js一次。好了，这里也不扯小的这数学老师教的语文了，直接说正确的使用姿势吧😂
假设缓存组defaul有如下配置：

chunks: 'async',
minChunks: 2,

的正确理解是有大于等于两个异步引用的模块引用的某个模块（暂且叫这个“某个模块”为moduleA）那么moduleA才会被打包到到default缓存组里（当然前提是还满足minSize, maxAsyncRequests,maxInitialRequests等各种条件下）
所以对应的场景应该是介样的

image.png

捣鼓一天了，未完待续。。。。。。。

我的webpack4踩坑记丫，彻底搞懂splitChunks和各

猜你喜欢

热点阅读