一、项目搭建
1.新建package.json文件 npm init
2.引入webpack4 npm i webpack --save-dev
3.引入webpack-cli npm i webpack-cli --save-dev
二、生产和开发模式
- 用于开发的配置文件，配置热更新、跨域配置、端口设置等
- 用于生产的配置文件，配置js压缩、代码拆分等
1.引入插件clean-webpack-plugin，可以在打包的时候先删除dist文件，再打包
npm i clean-webpack-plugin --save-dev
2.使用babel-loader加载器，将ES6及以上版本转译至ES5
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm i @babel/polyfill @babel/runtime
3.使用splitChunksPlugins，splitChunksPlugins是webpack主模块中的一个细分模块，无需npm引入
4.引入html-loader打包之后自动生成HTML文件，并自动引入打包后的js文件
npm i html-webpack-plugin html-loader --save-dev
5.引入css-loader、style-loader。
css-loader：负责解析CSS代码，主要是为了处理CSS中的依赖，例如@import和url()等引用外部文件的声明
style-loader：会将css-loader解析的结果抓变成JS代码，运行时动态插入style标签来让CSS代码生效
npm i css-loader style-loader --save-dev
6.如果需要单独把CSS文件分离处理啊，需要使用mini-css-extract-plugin插件，该插件不支持热更新一般在生产环境中使用，开发环境下还是使用'style-loader'
npm i mini-css-extract-plugin --save-dev
这样就生成了单独的css文件，但是并没有压缩，引入optimize-css-assets-webpack-plugin插件来实现css压缩
npm install optimize-css-assets-webpack-plugin --save-dev
7.处理scss文件，引入node-sass sass-loader
npm i node-sass sass-loader --save-dev
module.rules.use数组中，loader的位置。根据webpack规则：放在最后的loader首先被执行，从上往下下的话是下面先执行，从左往右写的话是右边先执行。
['style-laoder','css-loader','sass-loader']
执行顺序为sass-loader --> css-loader --> style-loader
首先应该利用sass-loader将scss编译为css，剩下的配置和处理css文件相同
8.为css加上浏览器前缀，安装postcss-loader和autoprefixer
npm install postcss-loader autoprefixer --save-dev
9.在css-loader中使用importLoaders属性
importLoaders:2表示：在一个css文件引入了另一个css，也会执行之前两个loader，即postcss-loader和sass-loader
三、Lazy Loading、Prefetching
异步能提高网页打开的性能，而同步代码是增加一个缓存，对性能的提升是非常有限的，因为缓存一般是在第二次打开网页或者刷新页面的时候，缓存很有用，但是网页的性能一般是用户第一次打开网页，看首屏的时候。
这样会出现另一个问题，当用户点击的时候采取加载业务模块，如果业务模块比较大的时候，用户点击后并没有立马看到效果，而是要等待几秒，这样体验也不好，解决方案：
1.如果访问首页的时候，不需要加载详情页的逻辑，等用户首页加载完了以后，页面展示出来了，页面的带宽被释放出来了，网络空闲了，再[偷偷]的去加载详情页的内容，而不是等用户去点击的时候再去加载。这个解决方案就是依赖webpack的Prefetching/Priloading特性。
document.addEventListener('click', () => { import(/* webpackPrefetch: true */ './click.js').then(({ default: func }) => { func() })})复制代码还有一个是webpackPreload
与prefetch相比，Preload指令有很多不同之处：
Prefetch会等待核心代码加载完之后，有空闲之后再去加载。Preload会和核心代码并行加载，还是不推荐。
针对优化，不仅仅是局限于缓存，缓存能带来的代码性能提升是非常有限的，而是如何让代码的使用率最高，有一些交互后采用的代码，可以写到异步组件里面去，通过懒加载的形式，去把代码逻辑加载进来，这样会使得页面访问速度变得更快。如果觉得懒加载会影响用户体验，可以使用Prefetch这种方式来预加载，不过在某些浏览器不兼容，会有兼容问题，重点不是在Prefecth怎么去用，而是在做前端代码性能优化的时候，缓存不是最重要的点，最重要的是代码使用的覆盖率上（coverage）
四、JS Tree Shaking
JS的Tree Shaking依赖的是ES6的模块系统（比如：import和export）
以lodash为例，打包后的大小是70kb。js tree shaking利用的是ES的模块系统。而lodash.js使用的是CommonJS而不是ES6的写法。所以，安装对应的模块系统即可。
安装lodash.js的ES写法的版本： npm i lodash-es --save
在一些对加载速度敏感的项目中使用第三方库，请注意库的写法是否符合ES模板系统规范，以方便webpack进行tree shaking。
五、CSS Tree Shaking
PurifyCSS将帮助我们进行CSS Tree Shaking操作。为了能准确指明要进行Tree Shaking的CSS文件，还有glob-all(另一个第三方库)
glob-all的作用就是帮助PurifyCSS进行路径处理，定位要做Tree Shaking的路径文件。
npm i glob-all purify-css purifycss-webpack --save-dev
六、图片处理
1.安装依赖url-loader和file-loader
npm install url-loader file-loader --save-dev
如果文件大小超过我们在url-loader选项中设置的limit的值，所以被单独打包。
url-loader会将引入的图片编码，转为base64字符串。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了，节省了图片请求。
但是，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为base64，大于limit的使用file-loader进行处理，单独打包
url-loader依赖file-loader，url-loader可以看作是增强版的file-loader
2.图片压缩
图片压缩需要使用img-loader插件，除此之外，针对不同的图片类型，还要引用不同的插件。比如：我们项目中使用的是png图片，因此，需要引入imagemin-pngquant，并且指定压缩率。压缩jpg/jpeg图片为imagemin-mozjpeg插件
npm i img-loader imagemin imagemin-pngquant imagemin-mozjpeg --save-dev
这里需要注意的是，imagemin-pngquant版本需要为^6.0.0，最新版本的是会报错的。
除了上述方法外，还可以使用image-webpack-loader进行图片压缩。
npm i image-webpack-loader --save-dev
3.生成雪碧图
安装依赖postcss-loader postcss-sprites
npm i postcss-loader postcss-sprites --save-dev
雪碧图是为了减少网络请求，所以被处理雪碧图的图片多为各式各样的logo或者大小相等的小图片。
而对于大图片，不推荐使用雪碧图。这样会使得图片体积很大
除此之外，雪碧图要配合css代码进行定制化使用。要通过css代码在雪碧图上精准定位需要的图片
4.字体文件处理
借助url-loader，可以识别并且处理eot、woff等结尾的字体文件。同时，根据字体文件大小，可以灵活配置是否进行base64编码。