前言
在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案
- CommonsChunkPlugin
- DllPlugin
对于 CommonsChunkPlugin
,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而DllPlugin
则是能把第三方代码完全分离开,即每次只打包项目自身的代码。
用法
要使用 DllPlugin,需要额外新建一个配置文件。所以对于用这种方式打包的项目,一般会有下面两个配置文件
先来看下 webpack.dll.config.js
module.exports = {
entry: {
vendors: ['react','lodash']
},output: {
filename: '[name].dll.js',path: 'dist/',library
},plugins: [
new webpack.DllPlugin({
path: path.join(__dirname,'dist/[name]-manifest.json'),// This must match the output.library option above
name: library
}),],}
module.exports = {
entry: {
app: './src/index'
},output: {
filename: 'app.bundle.js',},plugins: [
new webpack.DllReferencePlugin({
context: __dirname,manifest: require('./dist/vendors-manifest.json')
})
]
}
manifest: require('./dist/vendors-manifest.json')
这里的路径要和 webpack.dll.config.js
里面的对应。
然后运行
然后你的 html 文件像下面这样引用
DLL Link Plugin
上面的用法也存在一些不方便的地方,比如在 webpack.config.js
中要明确指出对应的 manifest.json
文件。还有当 DLL 需要更新的时候,比如 react
升级了,或者加入新的第三方库,都需要手动像下面这样编译一次。
因为上面这些问题,所以基于官方的 DllReferencePlugin
,我写了一个打包的插件,nofollow" target="_blank" href="https://github.com/clinyong/dll-link-webpack-plugin">Dll Link Plugin。
使用这个插件,只需要对 webpack.config.js 作下小小的改动
module.exports = {
// ...
plugins: [
new DllLinkPlugin({
config: require('webpack.dll.config.js')
})
]
}
直接替换掉 DllReferencePlugin
,然后传入对应的 DLL 配置文件就可以了。每次打包的时候,只需要运行
上面的命令便会自动生成对应的 vendors 文件,需要更新的时候,也会自动更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/37247.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。