先说一下在推文中提到的 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)》之铭言：
: 各位前辈好,
: 新手问题想请教各位大大,
: 目前有一个页面大致长这样,
: