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 批 ...
随机推荐
- js插件ztree使用
最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...
- tp备份数据
<?php namespace Chenlin2103\Controller; class BaksqlController extends MainController{ public $co ...
- 本地pip 源搭建起来
pip install pip2pi pip2tgz target_dir -r requirement.txt 下载想要的本地的py包 /usr/local/python3/bin/dir2pi ...
- 使用SQL语句操作数据
一.SQL 结构化查询语言 1.T-SQL 和 SQL的关系 T-SQL是SQL的增强版 2.SQL的组成 2.1 DML (数据操作语言) 增加,修改,删除等数据操作 2.2 DCL (数据控制语言 ...
- Java学习NO.3
今日学习重点: while循环: 语法:while(条件表达式){ 循环操作 } 条件表达式符合,循环继续执行:否则,退出循环. 循环四要素:循环初始化.循环条件.循环操作.循环变量的改变 do-wh ...
- .NET并行计算和并发8:硬件支持
共享内存多核系统,分布式内存系统 区别 分布式内存系统主要通过Message passing interface在各个微处理器之间通信,但是MPI共享内存多核系统是没有必要的,会造成额外的开销. 分布 ...
- pypi镜像源加速第三方库在线安装
使用pypi镜像源加速第三方库在线安装 用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi.python.org/pypi 下载到本地,然后解包安 ...
- 怎样检测TCP/UDP端口的连通性
1 TCP端口的连通性 TC端口的连通性,一般通过telnet检测: TCP协议是面向连接的,可以直接通过telnet命令连接 telnet host-ip port 2 UDP端口的连通性 因为公司 ...
- python3+cv2+andiord安卓摄像头
#coding=utf-8import cv2 import time if __name__ == '__main__': cv2.namedWindow("camera",1) ...
- Anaconda安装(Windows)
Anaconda集成了python和各种常用工具. 目前有两个版本,分别包含了python2.7和python3.5,并且自动添加环境变量.去官网下载安装包. 1.安装其他模块.conda insta ...