Re: [問題] common module規劃
先說一下在推文中提到的 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)》之銘言：
: 各位前輩好,
: 新手問題想請教各位大大,
: 目前有一個頁面大致長這樣,
: -------------------
: Logo| sysA | sysB
: -------------------
: Content
: -------------------
: Content的內容會隨著menu bar 點sysA or sysB 變動,
: 而專案裡面的切分,sysA跟sysB都各是一個npm前端專案,用webpack打包,
: 而現在上面那個menu也想抽出來用一個npm專案做一些較複雜的介面,
: (現行就是一個html template)
: 他也會包含了jquery, bootstrap, etc.
: 問題就是說,另外兩個前端專案都已經有webpack包了jquery,bootstrap等等,
: 這邊有辦法重用嗎? (webpack包裝後jquery,$這種keyword好像就無法直接access)
: 也就是說當這三個不同目錄的專案,有些共用lib時候,有辦法變一個common的lib嗎?
: 我各自專案裡面有放common module的webpack plugin不過不同專案的話怎麼互通呢?
: 請各位大大指教 m(_ _)m
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 113.61.208.23
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1511274107.A.A19.html
推
11/21 22:37,
6年前
, 1F
11/21 22:37, 1F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：