解析ES6

image.png
image.png
preset就是一些plugins的集合
npm安装@babel/core @babel/preset-env babel-loader
webpack.config.js loader配置
image.png

解析ReactJSX

image.png

解析CSS

image.png

解析LESS || SASS

image.png

图片解析

image.png

字体解析

在webpack里面解析图片和解析字体都一样，因为图片和字体都不是代码文件，
所以二者都可以用file-loader处理
image.png
除了file-loader之外，还可以用url-loader，url-loader可以做小图片小字体的base64的转换。
image.png
limit的意思是小于10240个字节，就是10KB大小的图片或字体就进行base64（二进制变成字符串）加密。在传输过程中是不可读的，避免第三方直接获取并读取二进制数据。
那么进行base64加密之后，并加入到了search.js里面。

文件监听

文件监听是发现源码发生变化时，自动重新构建出新的输出文件。

webpack 开启监听模式，有两种方式：

  • 启动webpack命令的时候，带上—watch参数

image.png

  • 在配置webapck.config.js 中设置watch:true

在设置了watch之后，但是依然有一个缺点，就是代码更新之后，开发者依然需要手动刷新浏览器。

文件监听的原理

image.png

热更新

第一种热更新：Webpack-dev-server

WDS不刷新浏览器，WDS不输出文件，而是放在内存里面，使用的是HotModuleReplacementPlugin插件
image.png

第二种热更新：Webpack-dev-middleware

WDM 将 webpack输出的文件传输给服务器
适用于灵活的制定场景

image.png

热更新原理：
image.png

文件指纹

文件指纹指的是打包输出的文件名的后缀
image.png

文件指纹用于做版本管理，只更新那些被改变的文件，没有被改变的文件浏览器可以用本地的强缓存。

文件指纹的生成

Hash

和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改。譬如在一次webpack打包中，有A B两个文件生成，而webpack打包阶段有complier,complation两个过程，在complation过程是负责文件的更新的，如果A页面js被修改，然后重新打包之后，B页面的js文件的hash值也会发生变化。

Chunkhash

和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值。

Contenthash

根据文件内容来定义hash，文件内容不变，则contenthash不变。一般CSS文件使用contenthash。

文件指纹设置

文件指纹是在生产环境中使用的。

CSS

设置MiniCssEXtractPlugin的filename,使用[contenthash]
image.png

图片

设置file-loader的name，使用[hash]
image.png
这里还有一个chunkhash
image.png

文件压缩

JS文件压缩

webpack内置了uglifyjs-webpack-plugin，默认用这个插件进行压缩

CSS文件压缩

使用optimize-css-assets-webpack-plugin
同时使用cssnano——CSS预处理器
插件用于匹配所有的CSS文件，CSSNANO然后对CSS文件进行处理

image.png

HTML文件压缩

修改html-webpack-plugin,设置压缩参数

image.png