元气少女冰

摘要： 在【拆分】和【压缩】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 │ ├─ 阅读全文

摘要： 前面文章中 体验了webpack的打包 、解析css资源 ，接下来看看项目中常用到的图片、字体、文件该怎么处理吧~ 项目路径如下，在上一篇 解析css资源 项目基础上增加了一些文件 demo ├─ src │ ├─ css │ │ ├─ index.css │ │ └─ file.css （+） │ 阅读全文