vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin
- 需要安装的插件有
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的更多相关文章
- webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)
webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...
- webpack 的第三方库分离并持久化缓存
我们常常需要在浏览器缓存一些稳定的资源,如第三方库等.要达到这个目标,只需要两步: 1.提取出“稳定的资源”: 2.提供稳定的文件hash . 处理后的出的文件就像这样子: app.1w3ad4q4. ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 仿B站项目(4)webpack打包第三方库jQuery
概述 在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决. 遇到的问题 一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bun ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...
- DllPlugin、DllReferencePlugin 可以提取的第三方库列表
DllPlugin.DllReferencePlugin 可以提取的第三方库列表: 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for web ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
- 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
随机推荐
- UVA-12569 Planning mobile robot on Tree (EASY Version) (BFS+状态压缩)
题目大意:一张无向连通图,有一个机器人,若干个石头,每次移动只能移向相连的节点,并且一个节点上只能有一样且一个东西(机器人或石头),找出一种使机器人从指定位置到另一个指定位置的最小步数方案,输出移动步 ...
- PL/SQL Developer 使用中文条件查询时无数据的解决方法(转)
原文地址: PL/SQL Developer 使用中文条件查询时无数据的解决方法 PL/SQL Developer 使用中文条件查询时无数据,这是由于字符集的不一致导致的. 执行以下sql命令:sel ...
- java.lang.Exception: Socket bind failed: [730048]
严重: Error initializing endpoint java.lang.Exception: Socket bind failed: [730048] ?????????×???(Э?é/ ...
- OC Xcode快捷键
1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...
- G1收集器
转载:https://blog.csdn.net/zhou2s_101216/article/details/79202893 http://blog.jobbole.com/109170/ http ...
- logistic 回归与线性回归的比较
可以参考如下文章 https://blog.csdn.net/sinat_37965706/article/details/69204397 第一节中说了,logistic 回归和线性回归的区别是:线 ...
- POJ 3176 Cow Bowling(dp)
POJ 3176 Cow Bowling 题目简化即为从一个三角形数列的顶端沿对角线走到底端,所取得的和最大值 7 * 3 8 * 8 1 0 * 2 7 4 4 * 4 5 2 6 5 该走法即为最 ...
- Ionic实现自定义返回按键事件
在 Android 和 Window 平台下,有时候我们需要监听返回按键的事件来进行相应的操作,也就是自定义返回按键事件.下面根据一个例子来讲解如何在 ionic 中自定义返回按键事件. 功能需求 首 ...
- POJ 3685 Matrix 二分 函数单调性 难度:2
Memory Limit: 65536K Total Submissions: 4637 Accepted: 1180 Description Given a N × N matrix A, ...
- 对spring 对持久层的支持和数据库连接池的理解
1.spring对持久层的支持在于,得到数据库连接之后操作上的封装,将操作简化了.也就是说以后操作sql语句就用XXXTemplate(就是一个工具类)对象了. 2.数据库连接池的作用只在于得到数据库 ...