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