webpack学习笔记(六)优化
1 loader
使用include,缩小编译范围:
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, '../src'),
use: [{
loader: 'babel-loader'
}]
}
]
2 使用resolve 设置省略的后缀名和默认的文件名
module.exports = {
resolve: {
extensions: ['.js','jsx'], //设置省略的后缀
mainFiles:['index','child'] //设置默认打开的文件名
}
}
3 目标:第三方模块只打包一次。
1) 第三方模块只打包一次;
2)我们引入第三方模块的时候,要去使用dll文件引入
对于第三方模块,不会经常变化的库,比如 react、 react-dom、 doash等库,打包的时候使用 webpack.dll.js文件:
const path = require('path');
module.exports = {
mode: 'production',
entry: {
vendors: ['lodash','react', 'react-dom'] //这里规定单独打包的文件
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll'),
library: '[name]' //打包生成一个(library)库,库的名字是 vendors,在全局变量中使用 vendors 调用这些库
}
}
命令行:
{
"scripts":{
"build:dll":"webpack --config ./build/webpack.dll.js"
}
}
这样就会把这几个库中的js打包到 dll文件夹下的 vendors.dll.js
3.2 打包成功之后,如何在业务代码中使用呢?
安装: import install add-asset-html-webpack-plugin --save
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
plugins:[
new AddAssetHtmlWebpackPlugin({ //向生成的html中添加下面的代码
filepath: path.resolve(__dirname,'../dll/vendors.dll.js')
})
]
}
const path = require('path');
const webpack = require('webpack'); module.exports = {
mode: 'production',
entry: {
vendors: ['lodash'],
react: ['react', 'react-dom'],
jquery: ['jquery']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]', //对生成的library库分析,并把映射关系放再 下面的path中
path: path.resolve(__dirname, '../dll/[name].manifest.json'),
})
]
}
然后在webpack.comm.js中
{
plugins:[
webpack.DllReferencePlugin({
manifest:path.resolve(__dirname,'../dll/vendors.manifest.json')
})
]
}
webpack学习笔记(六)优化的更多相关文章
- 深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam)
深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam) 深度学习笔记(一):logistic分类 深度学习笔记(二):简单神经网络,后向传播算法及实现 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
- Go语言学习笔记六: 循环语句
Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
- webpack学习(六)—webpack+react+es6(第3篇)
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)
目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...
随机推荐
- RAID配置多阵列
感谢: https://www.cnblogs.com/hystj/articles/8672029.html
- GridView(多选功能)
多选功能 将optionSelection下的MultiSelect修改为true开启多选,MultiSelectMode有三种模式可选,单元格选择,行选择,与checkBox选择,第三种选择方式会 ...
- (2018 Multi-University Training Contest 3)Problem D. Euler Function
//题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6322 //题目大意:给定 k,求第 k 小的数 n,满足 φ(n) 是合数.显然 φ(1) = 1 ...
- memge和saveOrUpdate的区别
今天做hibernate开发的时候遇到这样一个错误: a different object with the same identifier value was already associated ...
- Problem A: 重载字符的加减法
Description 定义一个字符类Character,只有一个char类型的数据成员. 重载它的+.-.<<和>>运算符,其中+.-的第二个操作数是int类型的整数n.“+ ...
- sprindmvc
Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模 ...
- Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array (简单DP)
题目:https://codeforces.com/contest/1155/problem/D 题意:给你n,x,一个n个数的序列,你可以选择一段区间,区间的数都乘以x,然后求出最大字段和 思路: ...
- PowerDesigner下载安装破解
power designer是Sybase公司为开发人员推出的一款常用的数据库建模工具集,它能对管理信息系统进行分析设计,几乎能完成数据库模型设计的全过程,利用Power Designer不仅可以制作 ...
- excel2013 打开为灰色空白 左下角显示就绪 要把文件拖进去才能打开!
最近电脑excel2013 打开总是为灰色空白 左下角显示就绪 要把文件拖进去或者在此再打开一个才能打开! 在网上搜了一下,我是使用下面这个方法解决的: 步骤一:请您在“开始”菜单的搜索框中输入“re ...
- springboot 报错 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported
开始 controller 方法写的是 @RequestMapping( value = "/add", method = RequestMethod.POST ) public ...