• 需要安装的插件有

    extract-text-webpack-plugin

    assets-webpack-plugin

    clean-webpack-plugin
npm install extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin --save-dev
  • 配置文件

    在 build 文件夹中新建 buildDll.js
var path              = require('path');
var utils = require('./utils') var webpack = require('webpack');
var config = require('../config')
var utils = require('./utils')
var dllConfig = require('./webpack.dll.conf');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin'); var chalk = require('chalk')
var rm = require('rimraf')
var ora = require('ora')
var spinner = ora({
color: 'green',
text: 'Dll生产中...'
})
spinner.start()
rm(path.resolve(__dirname, '../static'), err => {
if (err) throw err
webpack(dllConfig,function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n') console.log(chalk.cyan(' dll succeed !.\n'))
})
});

在 build 文件夹中新建 webpack.dll.conf

var path = require('path');
var webpack = require('webpack'); //调用webpack内置DllPlugin插件
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 提取css
var AssetsPlugin = require('assets-webpack-plugin'); // 生成文件名,配合HtmlWebpackPlugin增加打包后dll的缓存
var CleanWebpackPlugin = require('clean-webpack-plugin');//清空文件夹 module.exports = {
entry: {
libs: [
'vue/dist/vue.esm.js',
'vue-router',
'vuex', 'js-md5',
'js-cookie', './src/assets/fastclick',
'./src/assets/base',
'./src/assets/flexible',
// './src/assets/reset_for_mobile.css',
'./src/assets/localResizeIMG',
'./src/assets/qrious', './src/assets/sign',
'./src/assets/uid',
'./src/assets/uuid', // 'element-ui',
// 'element-ui/lib/theme-default/index.css',
// 'mint-ui',
// 'mint-ui/lib/style.css',
]
},
output: {
path: path.resolve(__dirname, '../static'),
filename: '[name].[chunkhash:7].js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, '../static/[name]-mainfest.json'),
name: '[name]_library',
context: __dirname // 执行的上下文环境,对之后DllReferencePlugin有用
}),
new ExtractTextPlugin('[name].[contenthash:7].css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}),
new AssetsPlugin({
filename: 'bundle-config.json',
path: './static'
}),
new CleanWebpackPlugin(['static'], {
root: path.join(__dirname, '../'), // 绝对路径
verbose: true, // 是否显示到控制台
dry: false // 不删除所有
}),
],
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
minimize: true //启用压缩
}
}]
})
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}]
},
}

修改webpack.base.conf.js

...
//新增
//引入webpack
var webpack = require('webpack'); module.exports = {
entry: {
...
},
output: {
...
},
externals: {
...
},
resolve: {
...
},
module: {
...
}, //新增
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/libs-mainfest.json') // 指向生成的manifest.json
}),
]
}

修改webpack.dev.conf

...
//新增
var bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
...
module.exports = merge(baseWebpackConfig, {
module: {
...
},
devtool: '#cheap-module-eval-source-map',
plugins: [
...
new HtmlWebpackPlugin({
...
//新增
libJsName:bundleConfig.libs.js,
libCssName:bundleConfig.libs.css,
env:config.dev.env,
}),
...
]
})

修改webpack.prod.conf

...
//新增
var bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
var CleanWebpackPlugin = require('clean-webpack-plugin');//清空文件夹
...
var webpackConfig = merge(baseWebpackConfig, {
module: {
...
},
...
output: {
...
},
plugins: [
...
new HtmlWebpackPlugin({
...
//新增
libJsName: bundleConfig.libs.js,
libCssName: bundleConfig.libs.css,
...
}),
...
//新增
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'), // 设置绝对路径
verbose: true,
dry: false
}),
...
]
})
...

在index.html引入生成的dll.js、dll.css

...
<body>
<div id="app"></div>
<!-- 新增 -->
<link rel="stylesheet" href="./static/<%= htmlWebpackPlugin.options.libCssName %>">
<script src="./static/<%= htmlWebpackPlugin.options.libJsName %>"></script>
</body>
...

修改package.json

{
...
"scripts": {
...
//新增
"build:dll": "node build/buildDll.js",
...
},
...
}

注意:

无论是开发环境还是生产环境,都必须先运行 npm run build:dll

dll文件打包的第三方库没有改变时,不需要再次运行

vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin的更多相关文章

  1. webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  2. webpack 的第三方库分离并持久化缓存

    我们常常需要在浏览器缓存一些稳定的资源,如第三方库等.要达到这个目标,只需要两步: 1.提取出“稳定的资源”: 2.提供稳定的文件hash . 处理后的出的文件就像这样子: app.1w3ad4q4. ...

  3. Vue CLI Webpack 创建Vue项目

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

  4. 仿B站项目(4)webpack打包第三方库jQuery

    概述 在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决. 遇到的问题 一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bun ...

  5. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  6. vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

  7. DllPlugin、DllReferencePlugin 可以提取的第三方库列表

    DllPlugin.DllReferencePlugin 可以提取的第三方库列表: 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for web ...

  8. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  9. 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)

    阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...

随机推荐

  1. HttpServletResponse输出的中文乱码

    HttpServletResponse输出有两种格式,一种是字符流,一种是字节流. 1.字符流 // 这句话的意思,是让浏览器用utf8来解析返回的数据,即设置客户端解析的编码 response.se ...

  2. SPFA单源最短路径算法

    我们用数组d记录每个结点的最短路径估计值,而且用邻接表来存储图G.我们采取的方法是动态逼近法:设立一个先进先出的队列用来保存待优化的结点,优化时每次取出队首结点u,并且用u点当前的最短路径估计值对离开 ...

  3. 【转】C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

    本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...

  4. js实现欧几里得算法

    概念 在数学中,辗转相除法,又称欧几里得算法(英语:Euclidean algorithm),是求最大公约数的算法. 证明 首先假设有两个数a和b,其中a是不小于b的数,记a被b除的余数为r,那么a可 ...

  5. 我所理解的event loop

    灵魂三问 JS为什么是单线程的 我们都知道,JS是单线程的语言,那为什么呢?我的理解是JS设计之初就是为了在浏览器端完成DOM操作和一些简单交互的,既然涉及到DOM操作如果是多线程就会带来复杂的同步问 ...

  6. .net 中struct(结构)和class(类)的区别

    1.struct 结构与class(类)的区别 1)struct是值类型,class是对象类型 2)struct不能被继承,class可以被继承 3)struct默认访问权限是public,而clas ...

  7. HDU 1714 math

    #include<stdio.h>#include<string.h>#include<iostream>#include<iomanip>#inclu ...

  8. python--ConfigParser读写改配置文件

    from configparser import ConfigParser fp = 'conf.ini' #定义配置文件名 conf = ConfigParser() #实例化 conf.read( ...

  9. WordCount:C语言实现

    项目地址:https://github.com/m8705/WordCount 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数. 这个项目要求写一个命令行程序,模仿已 ...

  10. iOS9 http 不能连接的解决办法

    iOS9要求App内访问的网络必须使用HTTPS协议.原有的HTTP请求会报错,适配方法如下. 打开TARGETS-Build Phases, 添加New Run Script Phase,代码如下: ...