随笔分类 - Webpack4踩坑之旅
Webpack 的文章看了很多，也协助过架构师写过一些 Webpack 的配置，但是始终没有彻底掌握，这次打算从头到尾来重新学习一遍。目的就是完全掌握 Webpack，让其为以后的工作服务。
摘要：前提说明 每次手动创建 HTML 文件来导入打包后的 JS，显然这种处理方式是不可取的。理想的处理方式应该是通过插件生成 HTML，这个生成的 HTML 文件自动导入打包后的 JS 文件。 这个时候用到的插件是： "html webpack plugin" 。 下面只是介绍一些常见的用法，如果要更深
阅读全文
摘要：前提说明 为了写样式方便快速，现在很多时候写样式都是使用预处理器了，预处理器有很多，包括 Sass、Less、Stylus 等。在这里选用的预处理器是 Stylus。 需要用到的模块： stylus stylus loader 文件的后缀名： 准备工作 首先，还是把需要的依赖安装一下 package
阅读全文
摘要：前提说明 去除无用样式就是去除样式中没有用到的 CSS 样式，这样有助于代码的优化，减少不必要样式代码的加载。 去除无用样式需要用到的模块： purify css purifycss webpack glob ，这个是一个辅助模块，用来获取 的 准备工作 首先，还是把需要的依赖安装一下 packag
阅读全文
摘要：前提说明 提取样式文件就是把源代码中写的样式提取成一个单独的文件，不是让其在 js 中加载。 提取样式文件会用到一个模块 mini css extract plugin ，这个模块是 loader 和 plugin 结合使用的。 准备工作 首先，还是把需要的依赖安装一下 package.json ：
阅读全文
摘要：什么是 PostCSS PostCSS 就是一个用 JavaScript 转换 CSS 的工具。 PostCSS 具有以下特点，但是不局限于以下列举的特点： 提高代码的可读性 使用 CSS 的未来特性 终结全局 CSS 在 CSS 避免出现错误 强大的栅格系统 准备工作 首先，还是把需要的依赖安装一
阅读全文
摘要：该篇文章主要讲的就是在 Webpack 中简单配置 CSS 样式文件的处理。 认识两个 loader style loader ：在 HTML 页面中插入 标签，并把样式内容拷贝到 标签中 css loader ：支持在 js 中通过 的方式导入样式文件 准备工作 首先，还是把需要的依赖安装一下 p
阅读全文
摘要：什么是懒加载 懒加载也叫作惰性加载，其本质就是在页面加载的时候，处于懒加载的 js 不会被请求，当触发某个操作的时候，懒加载的 js 才会被加载。目的就是在页面加载的时候，尽量加载当前页面用到的信息。 准备工作 为了保证代码的统一，首先把安装的依赖贴出来： Webpack 的配置 webpack.c
阅读全文
摘要：前提说明 在单页应用中的代码分割和多页应用中的代码分割有一定的区别： 多页应用的代码分割可以通过 Webpack 的配置来实现 单页应用的代码分割只能通过代码中的动态指定 来实现 准备工作 为了获取一致的代码体验，这里还是习惯性的把所依赖的模块贴出来： 由于单页应用的入口只有一个，且代码分割的内容不
阅读全文
摘要：如果要彻底明白 Webpack V4 版本如何抽取公共代码，就要设计一个场景来支持抽取公共代码的多种形式，能够从代码运行的结果中查看实际的效果，从效果中深入理解各个参数的作用。 首先需要明白一点：抽取公共代码一般用于多页应用，也可以理解成多页应用的代码分割。 场景设计 在设计场景之前，首先要明白公共
阅读全文
浙公网安备 33010602011771号