• 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
• WebPack-18-搭建基本的前端开发环境
  需求 我们日常使用的前端开发环境应该是怎样的？我们可以尝试着把基本前端开发环境的需求列一下： 构建我们发布需要的 HTML、CSS、JS 文件 使用 CSS 预处理器来编写样式 处理和压缩图片 使用 Babel 来支持 ES 新特性 本地提供静态服务以方便开发调试 上述几项应该可以满...
  2018-04-23 13:59:43 | WebPack
• WebPack-17-webpack 的概念和基础使用
  webpack 的概念和基础使用 我们在小册介绍中提到，webpack 是一个 JS 代码模块化的打包工具，藉由它强大的扩展能力，随着社区的发展，逐渐成为一个功能完善的构建工具。相信开始学习这个小册的同学们多多少少都能够理解为什么前端开发中会使用到 webpack，我们不再详细介绍 webpack 的使用背景，直奔本小节的主题。 安装和使用 我们使用 npm 或者 yarn 来安装 w...
  2018-04-23 13:59:43 | WebPack