由于本例单入口时打包的文件体积过大,将其分成多入口。

主要涉及到的几个文件为:

/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
  1. 新建文件webpack.dll.config.js,可以放置在任意位置,只要将路径理清即可。本例以根目录示例:
  2. 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中增加:

  3.   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中使用:

  4.     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模板)的更多相关文章

  1. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

  2. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  3. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  4. 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  5. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  6. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  7. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  8. Vue.js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  9. 【非专业前端】vue+element+webpack

    先点这里(- ̄▽ ̄)- 环境搭建 默认你已经安装了node.js 下面安装vue和webpack npm install -g @vue/cli npm install -g @vue/cli-ini ...

  10. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

随机推荐

  1. 【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 ...

  2. Cocos Creator 监听安卓屏幕下方返回键

    addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...

  3. c#中WebApi开发遇到的坑

    一.如何新建一个webApi项目 打开VS→找到解决方案→新建项目→类库或web应用程序→选择空的WebApi项目→在Global.asax文件的Application_Start方法中注册WebAp ...

  4. c# 中HttpClient访问Https网站

    c# 中HttpClient访问Https网站,加入如下代码: handler = new HttpClientHandler() ;handler.AllowAutoRedirect = true; ...

  5. 【SW4STM32生成 hex文件的设置方法】

    SW4STM32生成 hex文件的设置方法 开发环境:WIN7_64 + SW4STM32  联系方式:yexiaopeng1992@126.com 修改: 2018年1月21日 在这周,有一个热心的 ...

  6. Git 教程(四):标签和其他

    标签管理 发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库 ...

  7. 用Flow编写更好的js代码

    关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的 ...

  8. 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)

    一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...

  9. centos6.9 PHP的编译安装并连接nginx

    1.安装yum -y install libxml2-devel openssl-devel bzip2-devel libmcrypt-devel 解决php包的依赖关系,可能libmcrypt会报 ...

  10. golang 中strconv包用法

    链接:https://studygolang.com/articles/5003 http://www.cnblogs.com/golove/p/3262925.html