• WebPack-30-创建自己的 loader
  在这一小节我们会来介绍如何创建一个 webpack 可用的 loader。 loader 是一个函数 先来看一个简单的例子： "use strict"; const marked = require("marked"); const loaderUtils = require("loader-utils"); module.exports = function (markdown) ...
  2018-04-23 13:59:43 | WebPack
• WebPack-29-探究 webpack 内部工作流程
  了解 webpack 整个基础工作流程，有助于我们解决日常使用 webpack 时遇到的一些问题，也有助于我们更好地理解 webpack loader 和 plugin 的使用。 抛开复杂的 loader 和 plugin 机制，webpack 本质上就是一个 JS Module Bundler，用于将多个代码模块进行打包，所以我们先撇开 webpack 错综复杂的整体实现，来看一下一个相...
  2018-04-23 13:59:43 | WebPack
• WebPack-28-提升 webpack 的构建速度
  我们的前端项目随着时间推移和业务发展，页面可能会越来越多，或者功能和业务代码会越来越多，又或者依赖的外部类库会越来越多，这个时候原本不足为道的 webpack 构建时间消耗就会慢慢地进入我们的视野。 构建消耗的时间变长了，如果是使用 CI 服务来做构建，大部分情况下我们无须等待，其实影响不大。但是本地的 webpack 开发环境服务启动时的速度和我们日常开发工作息息相关，在一些性能不是特别...
  2018-04-23 13:59:43 | WebPack
• WebPack-27-优化前端资源加载 3 - 进一步控制 JS 大小
  前面已经介绍了一些优化资源加载的方法，这一小节是这个主题的最后一部分，内容更为深入，主要介绍如何把我们的 JS 代码文件变得更小。 按需加载模块 前面讲述了如何把大的代码文件进行拆分，抽离出多个页面共享的部分，但是当你的 Web 应用是单个页面，并且极其复杂的时候，你会发现有一些代码并不是每一个用户都需要用到的。 你可能希望将这一部分代码抽离出去，仅当用户真正需要用到时才加载，这个时候...
  2018-04-23 13:59:43 | WebPack
• WebPack-26-优化前端资源加载 2 - 分离代码文件
  上一小节介绍了如何做图片加载相关的优化以及压缩代码，这一部分内容会稍微深入点，讲解如何利用浏览器的缓存以及在 webpack 中实现按需加载代码。 分离代码文件 关于分离 CSS 文件这个主题，之前在介绍如何搭建基本的前端开发环境时有提及，在 webpack 中使用 extract-text-webpack-plugin 插件即可。 先简单解释一下为何要把 CSS 文件分离出来，而不是...
  2018-04-23 13:59:43 | WebPack
• WebPack-25-优化前端资源加载 1 - 图片加载优化和代码压缩
  图片加载优化和代码压缩 前面我们已经提及如何使用 webpack 来满足不同环境的构建需求，其中在生产环境构建时会做额外的一些工作，例如代码压缩等。这一部分的工作就是这一小节的主题，即优化前端资源的加载性能。 我们总是希望浏览器在加载页面时用的时间越短越好，所以构建出来的文件应该越少越小越好，一来减少浏览器需要发起请求的数量，二来减少下载静态资源的时间。 其实 webpack 把多个代...
  2018-04-23 13:59:43 | WebPack
• WebPack-24-用 HMR 提高开发效率
  用 HMR 提高开发效率 HMR 全称是 Hot Module Replacement，即模块热替换。在这个概念出来之前，我们使用过 Hot Reloading，当代码变更时通知浏览器刷新页面，以避免频繁手动刷新浏览器页面。 HMR 可以理解为增强版的 Hot Reloading，但不用整个页面刷新，而是局部替换掉部分模块代码并且使其生效，可以看到代码变更后的效果。 所以，HMR 既避...
  2018-04-23 13:59:43 | WebPack
• WebPack-23-env differ 开发和生产环境的构建配置差异
  开发和生产环境的构建配置差异 我们在日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印 debug 信息，包含 sourcemap 文件；另外一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印 debug 信息，静态文件不包括 sourcemap 的。有的时候可能还需要多一套测试环境，在运行时直接进行请求 mock ...
  2018-04-23 13:59:43 | WebPack