摘要：
我们编写的代码，比如 ES6、 TypeScript、react 等是不能被浏览器直接识别的，需要通过 webpack 、rollup 这样的构建工具来对代码进行转换、编译。 但随着项目越来越大，需要处理的资源越来越多，构建工具也需要很长的时间才能开启服务，因此产生了新型的前端构建工具 Vite ， 阅读全文
摘要：
rollup 也是一个 JavaScript 的模块化编译工具，可以帮助我们处理资源。 与webpack比较 rollup相比 webpack 理念更为简单，能处理的场景也更有限。 | | 资源类型 | 处理方式 | 应用场景 | | | | | | | webpack | 所有资源 | loade 阅读全文
摘要：
gulp 一般用于处理自动化任务，默认情况无法处理模块化，也不会用于大型项目，但它可以使用各种插件来编译 html、css、js 等资源。 不清楚如何使用 gulp 开启任务的朋友可以参考 gulp使用指南 处理html 处理 html 资源使用到 gulp-htmlmin 这个插件，和 webpa 阅读全文
摘要：
gulp 是一个使用“流”来实现自动化的工具，正如 官方文档 首页展示的这副动图一样，以“流动”的状态去处理 TypeScript、PNG、Markdown 资源。 与webpack比较 | 类别 | webpack | gulp | | -|-|-| |核心理念| module bundler|t 阅读全文
摘要：
loader 在 webpack 编译中起到非常重要的作用，用于对模块的源代码进行转换，比如 css-loader 将 css 代码处理成字符串，style-loader 创建 style 标签将 css 代码添加到 html 页面中。 自定义 loader 新建 node 项目，在 src 文件夹 阅读全文
摘要：
tree shaking 依赖于ES Module 的静态语法分析，在项目编译时移除无用的代码以减少文件体积。 usedExports 在文件中，我们可能定义了变量但是暂时又没有用到，这样会造成空间的浪费。在 mode 为 production 时，会默认做一些配置，将无用的代码删除。为了看到没有做 阅读全文
摘要：
webapck 中提供了压缩 js 代码的方式，可以移除无用代码、替换变量名等，减少编译后文件体积，提升加载速度。 不同mode 在 webpack 配置文件 webpack.config.js 中通过将 mode 设置为 development 或者 production，会对代码进行不同的处理。 阅读全文
摘要：
DLL（Dynamic Link Library）动态链接库在 webpack 中用来将可共享且不常改变的代码抽取成公共的库。 没有使用 DLL react 和 react-dom 在 react 项目中是必备的两个库，把它们抽取出来单独打个包。 首先进行安装 npm install react r 阅读全文
摘要：
hash、contenthash 和 chunkhash 是通过散列函数处理之后，生成的一串字符，可用于区分文件。 文件名不带哈希值 webpack.config.js 文件中，output 中定义输出 js 文件命名，plugins 中定义的抽取 css 文件命名 const MiniCssExt 阅读全文
摘要：
在【拆分】和【压缩】css代码之前，首先要配置 loader 处理不同的 css 资源，因为 webpack 没有默认可处理 css 资源的规则，具体可参考这一篇 webpack处理css/less资源 style-loader loader 处理不同类型的 css 资源后通过 style-load 阅读全文