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学习笔记(六)优化的更多相关文章

  1. 深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam)

    深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam) 深度学习笔记(一):logistic分类 深度学习笔记(二):简单神经网络,后向传播算法及实现 ...

  2. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  4. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. python3.4学习笔记(六) 常用快捷键使用技巧,持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

  6. Go语言学习笔记六: 循环语句

    Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...

  7. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  8. Linux学习笔记(六) 进程管理

    1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...

  9. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  10. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

随机推荐

  1. js插件ztree使用

    最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...

  2. tp备份数据

    <?php namespace Chenlin2103\Controller; class BaksqlController extends MainController{ public $co ...

  3. 本地pip 源搭建起来

    pip install pip2pi pip2tgz target_dir -r requirement.txt 下载想要的本地的py包  /usr/local/python3/bin/dir2pi ...

  4. 使用SQL语句操作数据

    一.SQL 结构化查询语言 1.T-SQL 和 SQL的关系 T-SQL是SQL的增强版 2.SQL的组成 2.1 DML (数据操作语言) 增加,修改,删除等数据操作 2.2 DCL (数据控制语言 ...

  5. Java学习NO.3

    今日学习重点: while循环: 语法:while(条件表达式){ 循环操作 } 条件表达式符合,循环继续执行:否则,退出循环. 循环四要素:循环初始化.循环条件.循环操作.循环变量的改变 do-wh ...

  6. .NET并行计算和并发8:硬件支持

    共享内存多核系统,分布式内存系统 区别 分布式内存系统主要通过Message passing interface在各个微处理器之间通信,但是MPI共享内存多核系统是没有必要的,会造成额外的开销. 分布 ...

  7. pypi镜像源加速第三方库在线安装

    使用pypi镜像源加速第三方库在线安装 用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi.python.org/pypi 下载到本地,然后解包安 ...

  8. 怎样检测TCP/UDP端口的连通性

    1 TCP端口的连通性 TC端口的连通性,一般通过telnet检测: TCP协议是面向连接的,可以直接通过telnet命令连接 telnet host-ip port 2 UDP端口的连通性 因为公司 ...

  9. python3+cv2+andiord安卓摄像头

    #coding=utf-8import cv2 import time if __name__ == '__main__': cv2.namedWindow("camera",1) ...

  10. Anaconda安装(Windows)

    Anaconda集成了python和各种常用工具. 目前有两个版本,分别包含了python2.7和python3.5,并且自动添加环境变量.去官网下载安装包. 1.安装其他模块.conda insta ...