• 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
• WebPack-16-底层原理
  揭示内部原理 此章节描述 webpack 内部实现，对于插件开发人员可能会提供帮助 打包，是指处理某些文件并将其输出为其他文件的能力。 但是，在输入和输出之间，还包括有 模块, 入口起点, chunk, chunk 组和许多其他中间部分。 主要部分 项目中使用的每个文件都是一个 模块 ./index.js import app from './app.js'; ...
  2018-04-23 13:59:43 | WebPack
• WebPack-15-为什么选择 webpack？
  为什么选择 webpack 想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们是如何在 web 中使用 JavaScript 的。 在浏览器中运行 JavaScript 有两种方法。 第一种方式，引用一些脚本来存放每个功能；此解决方案很难扩展，因为加载太多脚本会导致网络瓶颈。 第二种方式，使用一个包含所有项目代码的大型 .js 文件，但是这会导致作用域、...
  2018-04-23 13:59:43 | WebPack