• 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
• WebPack-22-更好地使用 webpack-dev-server
  更好地使用 webpack-dev-server 在构建代码并部署到生产环境之前，我们需要一个本地环境，用于运行我们开发的代码。 这个环境相当于提供了一个简单的服务器，用于访问 webpack 构建好的静态文件，我们日常开发时可以使用它来调试前端代码。 之前在第 2 小节的启动静态服务部分，我们已经简单介绍过 webpack-dev-server 的使用了。 webpack-dev-...
  2018-04-23 13:59:43 | WebPack
• WebPack-21-使用插件
  使用 plugin webpack 中的 plugin 大多都提供额外的能力，它们在 webpack 中的配置都只是把插件实例添加到 plugins 字段的数组中。 不过由于需要提供不同的功能，不同的插件本身的配置比较多样化。 社区中有很多 webpack 插件可供使用，而优秀的插件基本上都提供了详细的使用说明文档。 更多的插件可以在这里查找：plugins in awesome-w...
  2018-04-23 13:59:43 | WebPack
• WebPack-20-配置 loader
  loader 在第 1 小节，我们提到过，webpack 的 loader 用于处理不同的文件类型，在日常的项目中使用 loader 时，可能会遇到比较复杂的情况，本小节我们来深入探讨 loader 的一些配置细节。 loader 匹配规则 当我们需要配置 loader 时，都是在 module.rules 中添加新的配置项，在该字段中，每一项被视为一条匹配使用 loader 的规则。...
  2018-04-23 13:59:43 | WebPack
• WebPack-19-webpack 如何解析代码模块路径
  如何解析代码模块路径 在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from './index.js' 来引用代码模块 index.js。 引用第三方类库则是像这样：import React from 'react'。 webpack 构建的时候，会解析依赖后，然后再去加载依赖的模块文件，那么 webpack 如何将上述编写的 ./index...
  2018-04-23 13:59:43 | WebPack