不会还有人不知道module、bundle和chunk的区别吧？

• module

非连续的功能块——提供了更小的表面积而不是整个程序。书写良好的modules提供了可靠的抽象及封装边界，组成了统一的设计和清晰的目的；模块解析（ModuleResolution）一个模块可以作为另一个模块的依赖模块，resolver是一个库（libary）用于帮助找不到模块的绝对路径，模块将在resolve.modules中指定的所有目录内搜索。
换句话说就是将一个个js、css拆分成一个个小模块。对于 webpack 来说，项目源码中所有资源（包括 JS、CSS、Image、Font 等等）都属于 module 模块。可以配置指定的 Loader 去处理这些文件。

如图所示：从main.js为入口文件，根据模块的依赖，一个一个的往上找，最后生成bundle。

下面是webpack与模块化之间的关系：

• chunk

该webpack专业术语用于webpack内部管理bundling的过程中。bundles由许多的chunks组成——这些chunk有不同的类型（比如entry或child）。通常，chunks直接与bundles相对应。然而，有一些配置可以使其不是一对一的关系；

产生chunk的三种途径：

1：entry入口
2：异步加载模块
3：代码分割（code spliting）

1.entry产生Chunk

• 传递一个字符串

entry: './src/js/main.js',

• 传递数组

entry: ['./src/js/main.js','./src/js/other.js'],

• 传递对象

entry: {
    main: './src/js/main.js',
    other: './src/js/other.js'
}

2.异步产生Chunk

{
    entry: {
        "index": "pages/index.jsx"
    },
    output: {
         filename: "[name].min.js",
         chunkFilename: "[name].min.js" // 为异步加载的chunk命名
    }
}
const myModel = r => require.ensure([], () => r(require('./myVue.vue')), 'myModel')

3.代码分割产生Chunk

module.exports = {
  entry: {
    main: __dirname + "/app/main.js",
    other: __dirname + "/app/two.js",
  },
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].js", //打包后输出文件的文件名
    chunkFilename: '[name].js',
  },

  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "initial",
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0 // This is example is too small to create commons chunks
        },
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }

      },
    }
  }
}

我们一起看看上面的代码会产生多少个chunk?
答案是5个，两个入口分别产生一个， runtimeChunk: "single"会将Webpack在浏览器端运行时需要的代码单独抽离到一个文件，commons下的配置会产生一个Chunk，vendor下的配置会产生一个Chunk。如下图。

• bundle

由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。
通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个Chunk会生产一个Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool配置成’source-map’。然后只有一个入口文件，也不配置代码分割：

 // webpack配置
 entry: {
    main: __dirname + "/app/main.js",
 },
 output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].js", //打包后输出文件的文件名
  },
 devtool: 'source-map',

这样的配置，会产生一个Chunk，但是会产生两个bundle，如下图

总流程图：

module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。