Skip to content

webpack 中 module chunk bundle 的区别

module - 各个源码文件,webpack 中一切皆模块

如 src 目录下都是模块

js
src;
--index.html;
--index.js;
--img;
--index.png;
--css;
--style.css;

chunk - 多模块合并成的,如 entry import() splitChunk

entry 定义 chunk 名称

js
entry: {
    index: path.join(srcPath, 'index.js'),
    other: path.join(srcPath, 'other.js')
},

import() 自动生成 chunk 名称

js
import('./dynamic-data.js').then((res) => {
  console.log(res.default.message); // 注意这里的 default
});

splitChunk 定义 chunk 名称

js
{
optimization: {
        // 分割代码块
        splitChunks: {
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                },
            }
        }
    }
}

使用 chunk 名称

js
{
  plugins: [
    // 多入口 - 生成 index.html
    new HtmlWebpackPlugin({
      // chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
      chunks: ['index'], // 只引用 index.js
    }),
  ];
}

bundle - 最终的输出文件,也就是 asset 文件

基于 MIT 许可发布