- 解析ES6
- 解析ReactJSX
- 解析CSS
- 解析LESS || SASS
- 图片解析
- 字体解析
- 文件监听
- 文件监听的原理
- 热更新
- 第一种热更新:Webpack-dev-server
- 第二种热更新:Webpack-dev-middleware
- 文件指纹
- 文件指纹的生成
- Hash
- Chunkhash
- Contenthash
- 文件指纹设置
- CSS
- 图片
- 文件指纹的生成
- 文件压缩
- JS文件压缩
- CSS文件压缩
- HTML文件压缩
解析ES6
preset就是一些plugins的集合
npm安装@babel/core @babel/preset-env babel-loader
webpack.config.js loader配置
解析ReactJSX
解析CSS
解析LESS || SASS
图片解析
字体解析
在webpack里面解析图片和解析字体都一样,因为图片和字体都不是代码文件,
所以二者都可以用file-loader处理
除了file-loader之外,还可以用url-loader,url-loader可以做小图片小字体的base64的转换。
limit的意思是小于10240个字节,就是10KB大小的图片或字体就进行base64(二进制变成字符串)加密。在传输过程中是不可读的,避免第三方直接获取并读取二进制数据。
那么进行base64加密之后,并加入到了search.js里面。
文件监听
文件监听是发现源码发生变化时,自动重新构建出新的输出文件。
webpack 开启监听模式,有两种方式:
- 启动webpack命令的时候,带上—watch参数
- 在配置webapck.config.js 中设置watch:true
在设置了watch之后,但是依然有一个缺点,就是代码更新之后,开发者依然需要手动刷新浏览器。
文件监听的原理
热更新
第一种热更新:Webpack-dev-server
WDS不刷新浏览器,WDS不输出文件,而是放在内存里面,使用的是HotModuleReplacementPlugin插件
第二种热更新:Webpack-dev-middleware
WDM 将 webpack输出的文件传输给服务器
适用于灵活的制定场景
热更新原理:
文件指纹
文件指纹指的是打包输出的文件名的后缀
文件指纹用于做版本管理,只更新那些被改变的文件,没有被改变的文件浏览器可以用本地的强缓存。
文件指纹的生成
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]
图片
设置file-loader的name,使用[hash]
这里还有一个chunkhash
文件压缩
JS文件压缩
webpack内置了uglifyjs-webpack-plugin,默认用这个插件进行压缩
CSS文件压缩
使用optimize-css-assets-webpack-plugin
同时使用cssnano——CSS预处理器
插件用于匹配所有的CSS文件,CSSNANO然后对CSS文件进行处理
HTML文件压缩
修改html-webpack-plugin,设置压缩参数