chunk的含义以及出现的情况
webpack特定术语在内部用于管理捆绑过程，输出束（bundle）由块组成。
是webpack 根据功能拆分出来的代码片段，包含三种情况
官方:
1.入口起点：使用entry配置手动地分离代码
**2.防止重复：**使用entry dependencies或者SplitChunkPlugin去重和分离chunk
3.动态导入：通过模块地内联函数调用来分离代码
通俗一点：
1.项目的入口文件（配置中的entry）
2.根据splitChunks拆分出来的代码
3.import 动态引入的代码（异步引入）
1.chunks三个值：async、initial、all
默认配置：其中chunks有三个值：async、initial、all
optimization: {splitChunks: {chunks: 'async',minSize: 20000,minRemainingSize: 0,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,enforceSizeThreshold: 50000,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},
1.1 async
async 异步也就是动态导入拆分，缺省值（默认值）
入口文件：
index.js:里面有两种拆分类型：entry文件（自身）、import()动态导入文件print、
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()})}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
print.js:包含一种拆分文件：node_modules文件
import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
其中webpack.config.js的部分配置
module.exports = {...entry: {index: {import: index,},},output: {filename: "[name].bundle.js",path: path.resolve(__dirname, "dist"),clean: true,},...
};
npm run build 之后拆分的文件夹
分析：
1.入口文件：index.js
2.异步加载文件：print.js
3.async 对应的print.js 中的 node_modules 文件 lodash
1.2 initial 初始化（入口）
同样执行打包操作：
分析：
1.入口文件 index.js
2.异步：print.js
因为对应的是 入口拆分 所以 没有拆分 lodash文件
改动：
print.js（去掉lodash的引入）
// import _ from "lodash";// node_modules
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
index.js （添加lodash）
import _ from "lodash";// node_modules
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()})}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
打包后的文件：
1.入口文件 index.js
2.异步：print.js
3.入口文件的node_modules的index.js中的lodash文件
另一种情况：
print.js:
console.log('The print.js has loaded! See the network tab')export default function printMe(){console.log("I get called from print.js --")
}
index.js:
import print from "./print"
function getLazyComponent () {const myDiv = document.createElement('div')const btn=document.createElement('button')btn.innerHTML="Clike me and look console"btn.onclick=function(){print()}myDiv.appendChild(btn)return myDiv
}
document.body.appendChild(getLazyComponent())
1.3 all（两个都进行拆分）
打包后文件：
总结：
async：只从异步加载的模块里面进行拆分
initial：只从入口模块里面进行拆分
all：从以上两者模块里面进行拆分
扩展webpack调试命令：
https://webpack.docschina.org/contribute/debugging/按照文档指示
1.npm install --global node-nightly
2.node-nightly //完成安装
// 使用 node-nightly与--inspect标志一起在任何基于 webpack 的项目中开始构建
// 比如构建你的build 类似执行npm run buildnode-nightly --inspect ./node_modules/webpack/bin/webpack.js
// 执行参数：
node-nightly --inspect ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
3.调试
node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
// 或者
node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.config.js
4.打开chrome://inspect---remote target 下面的文件Chunk值总结
splitChunks中chunk的值：
默认解析出：initial 文件、动态导入文件,存在即导出
1.async ：针对动态导入的文件内容进行解析，并按照相关规则分割代码
2.initial: 针对入口文件的内容进行解析，按照规则分割代码
以上二者都包括引用 import 同步导入的文件内容的代码chunk
例如：
index.js文件
import print from "./print"
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'chunks:'initial'
运行打包之后：--针对入口文件进行解析--
index.js.bundle.js、 lodash.bundle.js 文件两个文件chunks：‘async’
运行打包之后：---不会针对入口文件进行解析--
index.bundle.js
同样：
例如：
index.js文件
import(/*webpackChunkName:"print"*/'./print').then(module=>{const print=module.defaultprint()
})
`````````````````````````````````````````````````
print.js文件
import lodash from 'lodash'chunks:'initial'
运行打包之后：--针对入口文件进行解析，不会针对动态问价解析--
index.js.bundle.js、print.bundle.jschunks：‘async’
运行打包之后：---针对动态文件解析，不会针对入口文件进行解析--
index.bundle.js、print.bundle.js、lodash.bundle.js 三个文件
