利用webpack-chain配置happypack和DllReferencePlugin

好久不发博文，最近主要是攻考试去了，积累的几篇文章都懒得写。

今天抽空写一下webpack的打包优化，由于我的框架是基于vue-admin-template做的，框架用的是webpack-chain命令做的，所以也导致了我做webpack优化走了不少弯路。

我的优化主要做了happypack多线程打包和DllReferencePlugin抽离依赖库。

1、先介绍happypack的步骤

（1）安装相关插件，os和happypack，安装的命令根据自己喜欢，我用的是yarn add os 和yarn add happypack。

（2）开始引入依赖，在vue.config.js引入相关依赖，如图：

（3）引入之后开始在chainWebpack(config){}里面写相关代码，如图：

代码如下：

config.plugin('happypack').use(HappyPack).tap(options => {options[0] = {id: 'babel',// 如何处理  用法和loader 的配置一样loaders: ['babel-loader?cacheDirectory=true'],// 共享进程池threadPool: happyThreadPool}return options})const hRule = config.module.rule('js')hRule.test(/\.js$/).include.add(resolve('src')).end()hRule.uses.clear()hRule.use('happypack/loader?id=babel').loader('happypack/loader?id=babel').end()

这里需要注意的是一定要记得定义一下，const hRule = config.module.rule('js') 再进行过滤和匹配，如果直接在config.module.rule('js').test(/\.js$/).include.add(resolve('src')) .end()是不对的，有可能是不报错又不生效的，有的是打包正式环境会报错，我的会报错，具体错误如下：

这个错误是我百度了不少案例，然后结合自己的需要才找到正确的写法的，希望大家不要跟我一样犯这个错误。参考链接是这位小哥的：https://blog.csdn.net/weixin_44083712/article/details/106102706

以上就是多线程打包的代码优化，下面是DllReferencePlugin抽离依赖库的优化

2、下面是DllReferencePlugin的优化，这个优化一波三折，三次停工去做别的，最后是挤时间搞定的。我做这个主要参考https://www.geekjc.com/post/5d7f901fb4f5e60da8f3e628这个博客写的，他写得很全，但我按照写法是有bug的。下面是我的步骤。

（1）先将相关插件下载，用到是add-asset-html-webpack-plugin和clean-webpack-plugin，我用的是yarn add add-asset-html-webpack-plugin,yarn add clean-webpack-plugin喜欢用npm的可以用npm。

（2）引入依赖，如图：

然后安装完之后就可以写代码啦，

（3）首先写要分离的包，在vue.config.js同级目录下新建webpack.dll.config.js文件，目录图如下：

（4）文件内容如下（主要抽你经常不变的依赖库出来，我的库不变的主要有以下几个，所以就打包了以下几个）：

const path = require('path')
// const CleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')module.exports = {mode: 'production',entry: {vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui', 'echarts', 'vue-count-to', 'xlsx'],util: ['lodash']},output: {filename: '[name].dll.js',path: path.resolve(__dirname, 'dll'),library: 'dll_[name]'},plugins: [new CleanWebpackPlugin(), // clean-wepback-plugin目前已经更新到2.0.0，不需要传参数pathnew webpack.DllPlugin({name: 'dll_[name]',path: path.join(__dirname, 'dll', '[name].manifest.json'),context: __dirname})]
}

（5）在package.json写一个命令 "build:dll": "webpack --config webpack.dll.config.js"，如图：

（6）写好命令之后在终端运行以下这个命令生成dll文件夹，如图：

（7）运行完6的命令后生成一个dll文件夹，到这儿离成功就剩一半了，但恰恰是这一半耗了我很长的时间。下面是写代码合并进去的时候，在vue.config.js里面写相关代码。如图：

代码如下：

const dllReference = (config) => {config.plugin('vendorDll').use(webpack.DllReferencePlugin, [{context: __dirname,manifest: require('./dll/vendor.manifest.json')}])config.plugin('utilDll').use(webpack.DllReferencePlugin, [{context: __dirname,manifest: require('./dll/util.manifest.json')}])config.plugin('addAssetHtml').use(AddAssetHtmlPlugin, [[{filepath: require.resolve(path.resolve(__dirname, 'dll/vendor.dll.js')),outputPath: 'dll',publicPath: 'dll'},{filepath: require.resolve(path.resolve(__dirname, 'dll/util.dll.js')),outputPath: 'dll',publicPath: 'dll'}]]).after('html')
}chainWebpack(config) {config.plugins.delete('preload') // TODO: need testconfig.plugins.delete('prefetch') // TODO: need testif (process.env.NODE_ENV === 'production') {dllReference(config)}}

（8）到这打包就完成了。我试着打包，发现报错了，报什么错呢，报Uncaught ReferenceError: _dll_vendor is not defined，我一百度，有个博主有遇到这个问题，说是未在webpack.dll.config.js中 new DllPlugin({}）内未配置context。我看看我的代码我内配置了啊，我的问题不是这个，然后找了很久发现了问题

主要是在vue.config.js里面的config.plugin('addAssetHtml')的publicPath: 'dll'到底应该是怎么样的，因为原博客是publicPath: '/dll'，我按照他的写法丢上服务器是报错的。然后看了一下是因为我们的module.exports = { publicPath: './'}是不一样的，我的是相对路径他的是绝对路径module.exports = { publicPath: '/'}，所以它需要‘/dll’而我不需要，我只需要写‘dll’。处理完之后打包，清除缓存运行，起来了，啊，一把辛酸泪啊！

注意：如果你路径写不对了，更新完之后，请先清缓存，清缓存很重要，并且后台丢包上去之后，你要等会。我就是因为不等或者是因为忘记清缓存，导致我很多次已经成功了，但是页面上还是报错。我又要不停试别的方法，导致多耗了几个小时的时间。

利用webpack-chain配置happypack和DllReferencePlugin相关推荐

深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
利用iptables来配置linux禁止所有端口登陆和开放指定端口
原文地址:http://www.2cto.com/Article/201109/103089.html 利用iptables来配置linux禁止所有端口登陆和开放指定端口 1.关闭所有的 INPUT ...
LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码
需求背景 JavaScript 是脚本语言, 没有编译过程, 直接以源码就可以运行. 有的时候, 出于安全或者其他的原因, 我们不希望别人直接读到源码, 或者很容易对源码做出修改使用. 这个时候, 就 ...
如何利用 webpack 在项目中做出亮点
大家好,我是若川.最近这几年,在前端代码打包器领域内,webpack 算得上是时下最流行的前端打包工具. 它可以分析各个模块的依赖关系,最终打包成我们常见的静态文件:.js . .css . .jpg ...
webpack中配置jquery暴露全局（expose-loader）
目录源代码普通引入内联loader使用 webpack配置全部暴露jquery cdn配置如何避免引入第三方模块最终代码源代码链接:https://pan.baidu.com/s/1i4 ...
三.webpack基本配置
webpack基本配置 1.关于webpack.config.js 首先我们先建立这样的目录文件说明: src : 放置源文件的目录 dist : 放置打包后文件的目录 index.html : 初 ...
实战 webpack 4 配置解析一
配置 github 仓库:https://github.com/nystudio107/annotated-webpack-4-config 随着Web开发变得越来越复杂,我们需要工具来帮助我们构建现 ...
Vue（四）：element-ui组件用法、表单验证、图标引入、webpack目录配置指向、export暴露方法
目录 1.element-ui组件用法 2.表单验证(复制的默认样式) 3.图标引入 4.webpack目录配置指向 5.export暴露方法 1.element-ui组件用法这里先补充一下安装依赖 ...

利用webpack-chain配置happypack和DllReferencePlugin

利用webpack-chain配置happypack和DllReferencePlugin相关推荐

最新文章

热门文章