前一段时间我把webpack源码大略读了一遍，webpack 到4.x版本后，其源码曾经比拟宏大，对各种开发场景进行了高度形象，浏览老本也愈发低廉。

（1）optimization.sideEffects = true 开启副作用性能（2）package.json 中设置 sideEffects : false 标记所有模块无副作用

导语：对于大型前端我的项目而言，构建的稳定性和易用性至关重要，腾讯文档在迭代过程中，简单的我的项目构造和编译带来的问题日益增多，极大的减少了新人上手与日常搬砖的开销。恰逢 Webpack5 上线，不如来一次彻底的魔改～

始终爆图片未找到的谬误，依照网上找到的解决方案，补全MiniCssExtractPlugin配置项publicPath，但仍然出错。看来问题不是出在MiniCssExtractPlugin。后通过认真排查。定位到谬误其实是css-loader编译时爆进去的。

plugins 和 loaders 的区别在于，loaders 是在打包构建过程中用来解决源文件的（例如：JSX、sass、less…）；而 plugins 插件并不间接操作单个文件，而是间接对整个构建过程起作用。

解题思路： MiniCssExtractPlugin.loader是用来提取css款式到css文件中并压缩，然而开发环境启动webpack devServer援用的文件都不是打包在dist目录的，是打包到内存中援用的，所以提取的css没有文件来包容它，就会报这个谬误。

在练习自定义webpack配置，应用的是webpack5.x版本，而后发现热更新生效。搜寻一番后，从下面的链接失去了解决办法：把package.json里的browserlist去掉。。。

在开发前端我的项目时，常常会遇到UI共事心愿在我的项目中应用一个炫酷字体的需要。那么怎么在我的项目中应用自定义字体呢？其实实现起来并不简单，能够借用CSS3 @font-face 来实现。本文着重介绍一下 webpack 我的项目如何正确打包引入的自定义字体。

后面咱们说了webpack的一些根底，当初咱们来应用webpack理论来编译写个我的项目。用vue-cli创立一个我的项目，而后把它的vue-cli-service以及webpack等黑盒工具移除，而后咱们来本人编译它。首先咱们要创立三个文件

团队应用NX这一 monorepo 工具来搭建 React 利用。NX 基于 React 利用在 webpack 打包时增加了url-loader的相干配置。然而共事反馈该url-loader针对局部援用的图片文件不起作用。