环境参数和预备技能：
webpack是什么
webpack的五个核心概念
Entry
入口
Output
输出，资源的命名等
Loader
处理非js资源
Plugins
执行更广泛的任务，从打包优化和压缩，一直到重新定义环境中的变量等
Mode
开发模式和生产模式
webpack的基本使用
下载两个包。
生产环境下的多了压缩。
无法打包样式文件。
打包样式资源
我们先要定义一个配置文件。
项目代码我们基于ES6模块化，项目代码我们基于common JS模块化。
样式中的详细配置。
npm init
初始化包文件。
下载两个包。
运行一下。指令：webpack
less需要添加一个规则。
打包html资源
下载插件。
引入插件，是一个构造函数。
使用。
会帮我们自动引入在入口文件标识要引入的文件。
打包图片资源
使用loader处理图片资源。
下载两个包。
上述的处理不了html的文件，所以我们要将html引进来，让url去解析，但是url解析使用的是es6的解析规则，html使用的commonJS的规则，我们我们关掉es解析模块。
不希望名字太长的话，我们可以对图片重命名。
打包其他资源
比如字体图标。
我们推荐阿里的图标库。
把其他打包的资源排除，使用我们的file-loader打包其他资源。
devServer
我们需要下载这个包。
包是本地安装的，所以需要用npx启动。
监视源代码的变化，一旦发现变化，就会自动编译。再也不需要我们重新打包查看效果。
自动打开浏览器。
开发环境基本配置
开发环境基本配置，能让代码运行。
资源越来越多，需要我们划分好目录。css样式文件也被打包到js文件中。
构建环境介绍
webpack将我们的文件打包成浏览器能够识别的文件。
提取css成单独文件
下载一个插件。
我们先引入这一个插件。
引入生成的单独css文件。
对我们输出的css文件进行重命名。
css兼容性处理
下载好两个包。
配置一下package.json
设置nodejs的环境变量。
配置一下。
压缩css
压缩css的插件。
引入。
调用。
js语法检查eslint
需要两个库。
只检查自己写的源代码。
推荐的语法检查的库。
下载这些包。
package.json中的配置。
让它自动修改。
有时候我们需要保留某些代码。忽略检查！
js兼容性处理eslint
下载插件。
进行配置。
将es6的语法转化成es5的语法。
没办法解决promise。
引入文件。
解决全部的兼容性问题。
所以我们还是推荐按需下载。
下载一个包，然后进行一些配置。使用第三种方案就不能使用第二种方案。
压缩html和js
生产环境就会自动压缩js代码。
html不需要进行兼容性处理。进行一些配置。
生产环境基本配置
注意顺序。
复用loader的代码。
性能优化介绍
HMR
比如，我们希望样式文件变化的时候，其他文件不要重新打包。所以，我们应该使用热模块。
html文件只有一个文件，一旦发生变化，反正都要变化，不需要做热模块。
我们需要对js的代码做hmr。
入口文件反正需要发生改变。
source-map
构建后映射的文件。
包含不同的参数。
最佳方案：eval-source-map
最佳方案：source-map
oneOf
让loader的处理性能更好。只会使用一个loader针对一个文件。
希望执行两个loader的话，我们要将代码不放在oneOf里面。单独放。
缓存
服务器代码
实现缓存之后，资源在用户端就会有1小时的强制缓存，如果此时出现了一个bug，我们的程序员修改了，但是重新打包上线的话，我们的资源因为被强制在用户端缓存了，不会再去服务端请求资源。所以我们更新资源的时候，我们为文件名添加版本号，让客户端重新请求资源。
每次打包都会生成一个哈希值。
我们给文件带上一个哈希值进行处理。
总结：
- babel缓存
- 文件资源缓存
chunk–代码块。
tree shaking
code split
多入口输出多个文件。
split——
将代码分开打包。公共文件打包成一起。
取一个固定名字。
懒加载和预加载
懒加载。按需加载，我们需要用到的时候才加载文件。
预加载。
预加载慎用，有很多兼容性问题。
PWA
PWA——渐进式网络开发程序。
下载好包。
配置一下插件。
插件帮我们生成文件。
全局资源加载好以后就注册。
多进程打包
thread-loader放在某一个loader的后面，就会使得该进程变多进程。
externals
忽略某些包的打包。
dll
可以对代码进行单独打包。
性能优化总结
webpack配置详细之entry
三种取值情况。
webpack配置详细之output
webpack配置详细之module
webpack配置详细之resolve
webpack配置详细之devServer
webpack配置详细之optimizaition
在生产环境才有意义。
下载并引入一个库，使用插件。
webpack5介绍和使用
webpack的下载。
配置文件更加简单。
