随笔分类 - webpack
摘要：公司项目一般都是使用集团封装好的脚手架，脚手架内部实现咱看不到也摸不着，好不容易组内推行新的UI框架，需要自行定义 webpack 配置，这可是个绝佳的好机会，我对配置过程进行了梳理，把商业项目的成熟配置小跑着送上。 初始化 首先新建一个空文件夹，执行 npm init 初始化生成 package.
阅读全文
摘要：在大型应用中， 我们可能会对其进行拆分，分成容器、主应用和多个子应用，使拆分后的应用独立开发与部署，更加容易维护。但无论是微应用、公共模块应用，都需要放到容器中才能使用。 如果多个应用之间希望资源共享，除了使用 npm 包的形式，基于Webpack 5 Module Federation（模块联邦）
阅读全文
摘要：我们编写的代码，比如 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
阅读全文
摘要：cdn 指的是通过相互连接的网络系统，使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。 在 webpack 中，我们可能会将引入的第三方资源会编译成单独的文件，作为静态资源放到服务器上，但有些库它本身就有 cdn 链接，通过 cdn 直接加载会使各地资源获取速度更快。
阅读全文
摘要：前面的文章中，webpack.config.js 中包含本地调试和线上发布的所有配置，编译后的 bundle.js 包含所有的代码。 当项目变大、代码量变多、配置增加的时候，文件的可维护性会越来越差，是时候对他们进行分离啦~ 环境分离 环境分离主要是区分本地和生产两种环境，本地调试需要能实时看到代码
阅读全文
摘要：通过 webpack 命令编译源代码时，如果我们对源代码进行了修改，需要重新执行命令才能看到编译后的效果。 这样在开发中非常的影响效率，如果存在一种方式，当文件被修改时，webpack 自动监听重新编译，并反馈给开发者，这样就能更高效的进行开发。 watch 我们通过 webpack 执行命令时，编
阅读全文
摘要：eslint 可以用于规范我们的编码，使得项目中的代码风格一致，更利于阅读和维护，而 prettier 可以在当我们代码不符合 eslint 规范是进行部分自动修复。 eslint 通过 npm install eslint -D 安装 eslint，然后执行 npx eslint --init 初
阅读全文
摘要：babel 在前端工程化开发中发挥着至关重要的作用，它能将较高级的语法转成浏览器可识别的代码，无论中 es6 中 const 、promise 还是 React、TypeScript。 以下babel在线工具中左侧输入代码，右侧为编译后的结果，设置需要浏览器兼容的版本后，可以看到 "const" 编
阅读全文
摘要：上一篇 webpack处理模块化源码 的文章中提到了 "source map"，这一篇来详细说说。 有什么作用 source map 用于映射编译后的代码与源码，这样如果编译后的代码出错了，可以很快速的定位到源文件的位置。 我们在 format.js 文件中打印一个不存在的 hello 变量， 当没
阅读全文
摘要：我们在 webpack初体验 这篇文章中演示到，浏览器不支持 CommonJS ，在特定场景下才支持 Es Module ，而 webpack 可以将这些模块化的代码解析成浏览器可识别的语法。 那么 webpack 究竟是对模块化做了怎样的处理呢？一起来看看。 项目结构 demo ├─ src │
阅读全文
摘要：前面文章中 体验了webpack的打包 、解析css资源 、处理图片字体等文件 接下来看看 plugins 有什么作用吧~ 项目路径如下，和上一篇 处理图片字体等文件 项目保持一致 demo ├─ src │ ├─ css │ │ ├─ index.css │ │ └─ file.css │ ├─
阅读全文
浙公网安备 33010602011771号