webpack中module、chunk尿瞭、bundle的區(qū)別
首先我們在 src 目錄下寫我們的業(yè)務代碼闽烙，引入 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 負責解析 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 對應一個 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
