@帅帅的老陆 刚看到你的评论
webpack 打包的时候,会根据入口文件的依赖关系来生成依赖图,比如入口文件 index.js 依赖了模块 a 和模块 b,模块 a 又依赖模块 a1 和模块 a2,那么 index.js 的依赖图里就包括 index.js、a、b、a1、a2 这些模块。有几个入口文件,就生成几张依赖图。你的配置里有两个入口文件,就会生成两张依赖图。
每个依赖图打包成一个 bundle。也就是说 webpack 会将 index.js、a、b、a1、a2 这些模块打包到一个 bundle 中。你的配置里有两个入口文件,会生成两张依赖图,打包生成两个 bundle。根据第一个入口文件 index.js 的依赖关系生成第一张依赖图,然后将第一张依赖图里的所有模块一起打包生成第一个 bunlde:main.bundle.js。根据第二个入口文件 ProcessList.jsx 的依赖关系生成第二张依赖图,然后将第二张依赖图里的所有模块一起打包生成第二个 bunlde:Ast_yjzb.bundle.js。
各个入口文件生成的依赖图是独立的,他们不会考虑其他的依赖图中是否有重复的模块。只要是出现在依赖图中的模块,就会打包到该依赖图生成的 bundle 中。如果 index.js 生成的依赖图里面有 ProcessList.jsx 模块,那么 ProcessList.jsx 模块以及该模块的依赖模块就会出现在 index.bundle.js 文件中。你的配置里两张依赖图里都包括 ProcessList.jsx 模块,那么打包生成的 main.bundle.js 和 Ast_yjzb.bundle.js 里都包括 ProcessList.jsx 模块的代码。
通过 dependOn 选项,可以将一张依赖图中的指定模块分离出去,不会出现在该依赖图最后打包生成的 bundle 中。配置文件如下:
module.exports = {
entry: {
main: {
import: './src/index.js',
dependOn: 'Ast_yjzb'
},
Ast_yjzb: './src/pagen/Ast_yjzb/ProcessList.jsx',
}
}
通过以上配置,webpack 就知道了 main entry 依赖于 Ast_yjzb entry,webpack 就会从第一张依赖图里去除掉 Ast_yjzb 的依赖图。也就是说 ProcessList.jsx 模块以及它的依赖模块只会打包到 Ast_yjzb.bundle.js 中,而不会打包到 main.bundle.js 中。
Webpack 5(五)代码分离如果不分离,生成一个 chunk,包含依赖图中的所有模块以及 runtime 和 manifest 代码 分离 runtime 和 manifest 代码 runtime 和...