先初始化一個簡單的項目
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在項目根目錄下創(chuàng)建src文件夾椿访，創(chuàng)建文件page.css
body {
background-color: orange;
}
創(chuàng)建common.js
module.exports = {
log: (msg) => {
console.log('hello ', msg)
}
}
創(chuàng)建文件page.js
import './index.css';
const { log } = require('./common');
log('webpack')
page.js引用了index.css和common.js。
再創(chuàng)建一個utils.js
export function square(x) {
return x * x;
}
utils.js沒有被任何東西引用术浪。
在項目根目錄創(chuàng)建webpack.config.js文件：
module.exports = {
entry: {
page: "./src/page.js"
},
output: {
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
}
};
output.filename指定了entry中的chunk的輸出名稱芝此。
因為我們里面有css文件憋肖，所以需要css-loader，運行以下命令進行安裝：
npm install css-loader --save-dev
接著進行打包
npx webpack
可以看到生成了page.bundle.js文件：
Hash: 59cad153575b5adc87c7
Version: webpack 4.43.0
Time: 232ms
Built at: 2020-07-06 16:18:22
Asset Size Chunks Chunk Names
page.bundle.js 1.99 KiB 0 [emitted] page
Entrypoint page = page.bundle.js
[0] ./src/page.js 73 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
+ 1 hidden module
看打印可以看到page.bundle.js打包了page.js婚苹、page.css岸更、common.js。沒有被引用的utils.js沒有被處理膊升。其實和我們在webpack.config.js的配置是一致的怎炊。page.js是入口文件，它引用了index.css和common.js廓译，所以這3個文件被打包在一起结胀。
整個流程可以這樣描述：我們寫的module文件交給webpack打包處理，webpack根據(jù)文件的引用關(guān)系生成chunk责循，這里只有1個入口文件，所以生成1個chunk攀操，chunk再生成最后的bundle文件院仿。一般1個chunk生成1個bundle，但也可以利用插件進行處理，比如1個chunk生成2個bundle歹垫。
那是不是只有entry中指定的文件才會被打包輸出呢剥汤？其實并不是。我們在page.js文件下加一段懶加載的代碼：
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import('lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
這里懶加載了lodash排惨，注意lodash要通過npm install --save lodash安裝吭敢。
再次打包：
Hash: a944abeab4db7b74fafe
Version: webpack 4.43.0
Time: 1840ms
Built at: 2020-07-06 16:33:39
Asset Size Chunks Chunk Names
1.bundle.js 71.1 KiB 1 [emitted]
page.bundle.js 3.12 KiB 0 [emitted] page
Entrypoint page = page.bundle.js
[0] ./src/page.js 314 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
[5] (webpack)/buildin/global.js 472 bytes {1} [built]
[6] (webpack)/buildin/module.js 497 bytes {1} [built]
+ 2 hidden modules
可以看到多了1個文件1.bundle.js。這個時候就是2個chunk了暮芭。我們懶加載的代碼也被打包出來了鹿驼，而且是一個獨立的文件。它的命名規(guī)則默認和filename的一致辕宏，例如這里我們的filename規(guī)則是[name].bundle.js畜晰，那么chunkfilename的規(guī)則也是[name].bundle.js，只是它的name其實就是id瑞筐。我們可以通過設(shè)置output.chunkFilename來指定它的輸出名凄鼻。
我們把webpack.config.js改成如下：
module.exports = {
entry: {
page: "./src/page.js"
},
output: {
filename: "[name].min.js",
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader'
]
}
]
}
};
打印出的結(jié)果：
Asset Size Chunks Chunk Names
1.bundle.js 71.1 KiB 1 [emitted]
page.min.js 3.12 KiB 0 [emitted] page
可以看到chunkFilename被修改了，但是還是以id來命名的聚假，很不直觀块蚌。
修改懶加載的代碼，在 import 里以注釋的形式為 chunk 文件取別名:
import './page.css';
const { log } = require('./common');
log('webpack')
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import(/* webpackChunkName: "lodash" */'lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
再次打包：
Hash: ccf3fe4f54e57f18f7bf
Version: webpack 4.43.0
Time: 629ms
Built at: 2020-07-06 16:59:38
Asset Size Chunks Chunk Names
page.min.js 3.13 KiB 0 [emitted] page
vendors~lodash.bundle.js 71.1 KiB 1 [emitted] vendors~lodash
Entrypoint page = page.min.js
[0] ./src/page.js 346 bytes {0} [built]
[1] ./src/page.css 272 bytes {0} [built]
[3] ./src/common.js 81 bytes {0} [built]
[5] (webpack)/buildin/global.js 472 bytes {1} [built]
[6] (webpack)/buildin/module.js 497 bytes {1} [built]
+ 2 hidden modules
可以看到名字變成了vendors~lodash.bundle.js膘格。
webpack 中峭范，module，chunk 和 bundle 的區(qū)別是什么闯袒？
webpack 中虎敦，filename 和 chunkFilename 的區(qū)別是什么？
