webpack dllPlugin使用(基于vue-cli webpack模板)
由于本例单入口时打包的文件体积过大,将其分成多入口。
主要涉及到的几个文件为:
/index.html,
/webpack.dll.config.js,
/build/webpack.base.conf.js,
/build/webpack.dev.conf.js,
/build/webpack.prod.conf.js
运行配置的dll命令如下:
webpack --config webpack.dll.config.js
- 新建文件webpack.dll.config.js,可以放置在任意位置,只要将路径理清即可。本例以根目录示例:
const fs = require('fs')
const path = require('path')
const webpack = require('webpack') let vendors = [
[
'echarts',
'echarts-wordcloud',
'element-ui'
],[
'vue/dist/vue.esm.js',
'vue-echarts',
'vue-js-modal',
'vue-router',
'vue-waterfall',
'vuex'
]
] module.exports = {
entry: {
// 多入口,单入口情况,只需写一个,key值自定义,value值为数组
vendor0: vendors[0],
vendor1: vendors[1]
},
output: {
path: path.join(__dirname, "static/dll"),
filename: "[name].[chunkhash].dll.js",
library: "[name]_[chunkhash]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dllManifest", "[name]-manifest.json"),
name: "[name]_[chunkhash]",
context: __dirname
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}在/build/webpack.base.conf.js中增加:
plugins: [
// 这是一个数组,单入口时只需填写一个对应的webpack.DllReferencePlugin实例
// webpack.DllReferencePlugin可以帮助webpack得知哪些包是dll负责的,进而避免重复打包
...(function () {
let max = 2
let res = []
for (let i = 0; i < max; i++) {
res.push(new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '../'),
manifest: require(resolve(`./dllManifest/vendor${i}-manifest.json`))
}))
}
return res
})()
]在/build/webpack.dev.conf.js,/build/webpack.prod.conf.js文件HtmlWebpackPlugin实例中添加dll属性,方便在index.html中使用:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
// ----------------------------------------------------
dll: (function () {
let max = 2
let res = []
for (let i = 0; i < max; i++) {
const dllName = require(path.resolve(__dirname, `.././dllManifest/vendor${i}-manifest.json`)).name.split('_')
res.push(`/static/dll/${dllName[0]}.${dllName[1]}.dll.js`)
}
return res
})()
// ----------------------------------------------------
})修改/index.html模板:
<!-- 要注意文件注入的位置,以免其他js运行前,找不到相关依赖 -->
<% for (let i of htmlWebpackPlugin.options.dll) { %>
<script src="<%= i %>"></script>
<% } %>
本次主要解决的问题是:每次代码改动重新打包花费时间过长的问题。
解决是通过webpack提供的DllPlugin完成,包括dll打包的js文件命名加上hash,以及避免每次打包需手动修改index.html模板的问题。
webpack dllPlugin使用(基于vue-cli webpack模板)的更多相关文章
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
- 基于Vue 和 webpack的项目实现
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?
环境: 有2个业务接口需要转发到82的服务器上: ../user/getCode.do ../user/doLogin.do 现象: 使用上述的 ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...
- Vue.js——webpack
Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...
- 【非专业前端】vue+element+webpack
先点这里(- ̄▽ ̄)- 环境搭建 默认你已经安装了node.js 下面安装vue和webpack npm install -g @vue/cli npm install -g @vue/cli-ini ...
- Vue.jsbrowserify项目模板
Vue.js——60分钟browserify项目模板快速入门 概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...
随机推荐
- 【Mac】-NO.161.Mac.1 -【MacOS Error running 'Tomcat 8.5.371': Cannot run program Permission denied】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...
- Cocos Creator 监听安卓屏幕下方返回键
addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...
- c#中WebApi开发遇到的坑
一.如何新建一个webApi项目 打开VS→找到解决方案→新建项目→类库或web应用程序→选择空的WebApi项目→在Global.asax文件的Application_Start方法中注册WebAp ...
- c# 中HttpClient访问Https网站
c# 中HttpClient访问Https网站,加入如下代码: handler = new HttpClientHandler() ;handler.AllowAutoRedirect = true; ...
- 【SW4STM32生成 hex文件的设置方法】
SW4STM32生成 hex文件的设置方法 开发环境:WIN7_64 + SW4STM32 联系方式:yexiaopeng1992@126.com 修改: 2018年1月21日 在这周,有一个热心的 ...
- Git 教程(四):标签和其他
标签管理 发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库 ...
- 用Flow编写更好的js代码
关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的 ...
- 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)
一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...
- centos6.9 PHP的编译安装并连接nginx
1.安装yum -y install libxml2-devel openssl-devel bzip2-devel libmcrypt-devel 解决php包的依赖关系,可能libmcrypt会报 ...
- golang 中strconv包用法
链接:https://studygolang.com/articles/5003 http://www.cnblogs.com/golove/p/3262925.html