webpack中module、chunk、bundle的區(qū)別
首先我們在 src 目錄下寫我們的業(yè)務(wù)代碼，引入 index.js、utils.js、common.js 和 index.css 這 4 個文件，目錄結(jié)構(gòu)如下：
src/
├── index.css
├── index.html // 這個是 HTML 模板代碼
├── index.js
├── common.js
└── utils.js
index.css 寫一點兒簡單的樣式：
body {
background-color: red;
}
utils.js 文件寫個求平方的工具函數(shù)：
export function square(x) {
return x * x;
}
common.js 文件寫個 log 工具函數(shù)：
module.exports = {
log: (msg) => {
console.log('hello ', msg)
}
}
index.js 文件做一些簡單的修改，引入 css 文件和 common.js：
import './index.css';
const { log } = require('./common');
log('webpack');
webpack 的配置如下：
{
entry: {
index: "../src/index.js",
utils: '../src/utils.js',
},
output: {
filename: "[name].bundle.js", // 輸出 index.js 和 utils.js
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 創(chuàng)建一個 link 標簽
'css-loader', // css-loader 負責(zé)解析 CSS 代碼, 處理 CSS 中的依賴
],
},
]
}
plugins: [
// 用 MiniCssExtractPlugin 抽離出 css 文件，以 link 標簽的形式引入樣式文件
new MiniCssExtractPlugin({
filename: 'index.bundle.css' // 輸出的 css 文件名為 index.css
}),
]
}
我們運行一下 webpack，看一下打包的結(jié)果：
我們可以看出，index.css 和 common.js 在 index.js 中被引入，打包生成的 index.bundle.css 和 index.bundle.js 都屬于 chunk 0，utils.js 因為是獨立打包的，它生成的 utils.bundle.js 屬于 chunk 1。
感覺還有些繞？我做了一張圖，你肯定一看就懂：
看這個圖就很明白了：
1、對于一份同邏輯的代碼，當我們手寫下一個一個的文件，它們無論是 ESM 還是 commonJS 或是 AMD，他們都是 module ；
2、當我們寫的 module 源文件傳到 webpack 進行打包時，webpack 會根據(jù)文件引用關(guān)系生成 chunk 文件，webpack 會對這個 chunk 文件進行一些操作；
3、webpack 處理好 chunk 文件后，最后會輸出 bundle 文件，這個 bundle 文件包含了經(jīng)過加載和編譯的最終源文件，所以它可以直接在瀏覽器中運行。
一般來說一個 chunk 對應(yīng)一個 bundle，比如上圖中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如說上圖中，我就用 MiniCssExtractPlugin 從 chunks 0 中抽離出了 index.bundle.css 文件。
1.1 一句話總結(jié)：
module，chunk 和 bundle 其實就是同一份邏輯代碼在不同轉(zhuǎn)換場景下的取了三個名字：
我們直接寫出來的是 module，webpack 處理時是 chunk，最后生成瀏覽器可以直接運行的 bundle。
參考來源：https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html
