本文的目的就是让读者对webpack快速的有一个整体的认识，了解其主要的功能。如果对其中某一项感兴趣，详细的使用方式建议查阅webpack官网文档。
首先了解一下gulp与webpack的区别
gulp：强调流程，通过配置一系列的task，定义task处理的事物（例如文件压缩合并、雪碧图、启动server、 版本控制等），然后定义执行顺序，来让gulp执行task，从而构建前端项目的流程。
webpack：是一个前端模块化方案，侧重模块打包，把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
相同：
可以文件合并与压缩（css）
不同点：
虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
webpack五个核心概念
- Entry – 如何，以哪个文件为起点开始打包，分析构建内部依赖图。
- Output – 把bundles输出到哪里，以及如何命名。
- Loader – webpack默认只能处理JS，如果需要处理其他必须html/css/img等资源就需要加载对应的Loader。相当于翻译官
- Plugins – 做一些功能更复杂的操作，比如压缩代码，定义环境变量，优化插件，语法检查，dll等
- Mode – development 本地调试，简单配置，能运行即可。production – 配置各种优化项，保证上线之后的性能
devServer
自动编译，自动打开浏览器，自动刷新
性能优化
开发环境
优化打包构建速度 – HMR
优化代码调式 – sourceMap(压缩后的js文件可以映射到源文件，快速找到代码行)
生成环境
打包速度
代码运行的性能 – oneOf、缓存、tree shanking、代码分割、懒加载、PWA、多进程打包、external、dll。
HMR（hot module replacement） – 热模块替换
监听细微变化进行局部更新
devServer:{
hot:ture
}
oneOf
rules配置项下面把所有的loader都放到oneOf数组里面，性能更好
缓存
只编译代码改变了的模块，其他模块开启babel缓存
rules下的babel-loader配置cacheDirectory:true
文件资源缓存，根据chunk生成hash值
content hash:根据文件的内容生成hash值
tree shaking
去除那些没有使用的代码
前提：
- 必须es6的模块化方案
- 开启production环境
package.json中配置
sideEffects:[“*.css”] // 保证css不会被摇掉
code split – 代码分割
entry里面配置多个入口，单页面还是多页面。如果所有的文件都在一个bundle里面的话bundle体积就会非常大。所以要把bundle拆开多个小文件。
optimization:{
splitChunks:{
chunks:’all'
}
}懒加载
先进行代码分割，再把要加载的文件import的时候加上webpackChunkName 标识
预加载的标识为 webpackPrefetch:ture
import(/* webpackChunkName:’test’, webpackPrefetch:true */ ‘.test’).then(({mul}) = > {
console.log(mul(4, 5))
})PWA (Progressive web apps，渐进式 Web 应用)
- Discoverable, 内容可以通过搜索引擎发现。
- Installable, 可以出现在设备的主屏幕。
- Linkable, 你可以简单地通过一个URL来分享它。
- Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
- Progressive, 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
- Re-engageable, 无论何时有新的内容它都可以发送通知。
- Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
- Safe, 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。
workboxWepackPlugin
多进程打包
npm i thread-loader -D在babel-loader外面套一个thread-loader
缺点：进程启动大概为600ms，进程开销比较大。
适用于工作消耗时间比较长的编译loader，比如编译js的babel-loader相对css就比较耗时。
externals
忽略一些包被打包进来，注意如果要使用这个库就要在html文件里面的script标签里面引用
externals:{
jquery:’jQuery'
}dll
和externals类似，可以将某些第三方依赖包统一打包到dll文件中。
把一些固有的库都先打包到dll文件里面。这样打包1次后面就不用每次都打包了。可以让第2次打包的过程变快。提升构建速度。