先說一下在推文中提到的 expose-loader
那是個可以把 module 匯出到全域空間的 loader
不過會缺點就是會造成全域空間的污染(?)
那接下來大約講一下 DllPlugin 的設定好了
其實這東西我也是第一次實際使用 之前只有看過別人用而已
剛剛在關機的期間研究了一下 如果有錯還請指正
那這邊有份包含了底下的原始碼的 gist
https://gist.github.com/DanSnow/e8fb490c9fbde4c0fba490b7d4c6c166
首先 DllPlugin 實際上分成兩個 plugin
一個是 DllPlugin 另一個是 DllReferencePlugin
DllPlugin: 建立共用的模組
DllReferencePlugin: 讓它去吃 DllPlugin 建出來的模組用的
首先我們要先建立共用的模組的部份
// webpack.dll.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
// 這邊要放共用的 library 比如 jQuery 之類的
// 注意 這邊一定要用陣列 這是 DllPlugin 的要求
entry: [
'./common'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'common.js',
library: 'MyCommon' // 這個要跟下面的 name 一樣
},
plugins: [
new webpack.DllPlugin({
// manifest.json 生成位置
path: path.resolve(__dirname, 'manifest.json'),
name: 'MyCommon', // 這個要跟上面的 library 一樣
context: __dirname
})
]
}
那設定好之後這個就可以先用 webpack 打包一份了
打包後會產生 dist/common.js 與 manifest.json 兩個檔案
common.js 是打包好的共用的 library
manifest.json 則是紀錄了 common.js 中打包的哪些東西
跟一些相關的資訊 等下的 DllReferencePlugin 會需要這個檔案
接下來則是需要引入這些共用的 library 的設定檔
// webpack.page-a.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './page-a',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'page-a.js'
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname, // 這個 context 必須跟上面的 context 是同一個位置
// 上面產生的 manifest.json 的位置
manifest: path.resolve(__dirname, 'manifest.json')
})
]
}
然後再用 webpack 打包這份 要注意的是打包的順序不能調換
因為這邊需要上面所產生的 manifest.json 檔案
打包完後 webpack 就會產生 page-a.js 這個檔案
那麼使用的時候就是先引入 common.js 再引入 page-a.js 就行了
<script src="common.js"></script>
<script src="page-a.js"></script>
那這邊有個東西需要特別注意 那就是 context
context 這個設定所指定的位置 會變成 webpack resolve entry point 的根目錄
比如今天如果把 page-a.js 跟 page-a 的 webpack 設定全部放到叫 page-a 的子資料夾
那麼上面的 entry 就要改成 './page-a/page-a'
這邊看不懂也沒關係 就乾脆改用絕對路徑就不用煩惱這個問題了
這個方法會有個小問題是 檔案其實會比 CommonChunkPlugin 大一點點
因為多了一份 webpack bootstrap 的程式碼
不過跟現在的網頁框架們比起來 這完全不算什麼了
還有另外會多一個全域變數
接著講一下 DllPlugin 的原理 這段可以跳過
DllPlugin 會在打包完後把整個 module 匯出到由 output.library 指定的變數中
所以這個 library 的名字要稍微注意一下不能跟其它全域變數衝突到
接下來會把所有打包進去的 package 與 webpack 中的 id 紀錄在 manifest.json 檔中
那 DllReferencePlugin 讀 manifest.json 並判斷哪些檔案被包進了 common.js 中
如果有紀錄被在 manifest.json 中的檔案 就會改由從 MyCommon 這個變數中引入
※ 引述《brandyjohn (hailcpp)》之銘言：
: 各位前輩好,
: 新手問題想請教各位大大,
: 目前有一個頁面大致長這樣,
: