• 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
• WebPack-14-hot deploy
  模块热替换(hot module replacement) 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。 主要是通过以下几种方式，来显著加快开发速度： 保留在完全重新加载页面期间丢失的应用程序状态。 只更新变更内容，以节省宝贵的开发时间。 ...
  2018-04-23 13:59:43 | WebPack
• WebPack-13-mainfest
  manifest 在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型： 你或你的团队编写的源码。 你的源码会依赖的任何第三方的 library 或 “vendor” 代码。 webpack 的 runtime 和 manifest，管理所有模块的交互。 本文将重点介绍这三个部分中的最后部分：runti...
  2018-04-23 13:59:43 | WebPack
• WebPack-12-target
  target 由于 JavaScript 既可以编写服务端代码也可以编写浏览器代码，所以 webpack 提供了多种部署 target，你可以在 webpack 的配置选项中进行设置。 用法 想设置 target 属性，只需在 webpack 配置中设置 target 字段： webpack.config.js module.exports = { target: 'n...
  2018-04-23 13:59:43 | WebPack
• WebPack-11-依赖图(dependency graph)
  依赖图(dependency graph) 每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。 当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口 开始，webpack 会递归的构建一个...
  2018-04-23 13:59:43 | WebPack