先說一下在推文中提到的 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://webptt.com/m.aspx?n=bbs/Web_Design/M.1511274107.A.A19.html