【翻译向】Webpack 1 到 2 升级指南

Create at 2017 01 20 • 15 min read • 技术 • webpack

resolve.root,resolve.fallback,resolve.modulesDirectories

这些配置项项都被一个单独的配置所替代 resolve.modules. 查看 resolving 了解更多。

resolve: {
-   root: path.join(__dirname, "src")
+   modules: [
+     path.join(__dirname, "src"),
+     "node_modules"
+   ]
}
 

resolve.extensions

这个选项已经不在需要传一个空字符串了。它的行为已经被移动到了 resol

Read more

【翻译向】webpack2 指南（下）

Create at 2017 01 19 • 17 min read • 技术 • webpack

缓存（Caching）

为了能够使 webpack 处理后的静态资源能够长期缓存下来，需要：

  1. 使用 [chunkhash] 给每一个文件创建基于内容变化的缓存标识
  2. 在 HTML 文件中引入文件时使用编译状态来拿到文件名称
  3. 在载入资源之前生成 chunk-manifest JSON 文件并写入到 HTML 页面中
  4. 确保包含启动代码的入口代码块的 hash 值不会被修改，当它的依赖没有变化的时候

存在的问题

每当我们代码中有一些东西需要被更新的时候，它需要在服务上部署然后由客户端重新下载这些文件。当网络状状况不太好的时候，这是意见非常低效的事情。这也是为什么浏览器要缓存静态资源的原因。

这会导致一个陷阱：当我们发布一个新的版本的时候不去更新的文件名，这会让浏览器认为文件没有变化，导致客户端拿不到最新的资源。

一个简单解决问题的方式就是告诉浏览器一个新的文件名。在没有 webpack 的时候

Read more

【翻译向】webpack2 指南（中）

Create at 2017 01 18 • 23 min read • 技术 • webpack

动态模块替换（Hot Module Repalcement -React）

就像之前 理念页面 中解析的细节那样，动态模块替换（HMR）会在应用运行时动态的替换、添加或者删除模块而不用重新刷新页面。 HMR 非常有用，当应用只有一个状态树（single state tree）时。

下面介绍的方法描述中使用了 Babel 和 React ,但这并不是使用 HRM 所必须的工具。

项目配置

这里会指导你如何用 Babel， React 和 PostCss 一起使用 HMR 去演示一个项目。为了能够跟着下面走下去，需要把这些依赖添加到 package.json 中去。

为了使用 HMR，你需要如下这些依赖：

npm install --save-dev [email protected]
Read more

【翻译向】webpack2 指南（上）

Create at 2017 01 17 • 17 min read • 技术 • webpack

前置定义

Bundle 代码包 Chunk 代码块

安装

npm install webpack --save-dev

代码分割

代码分割是 webpack 中最引人注目的功能之一。它允许你把代码分割成各种可以根据需求载入的代码包，就像一个用户浏览器去匹配路由一样，或者一个用户发出的事件。这允许你小的模块，允许你控制资源的载入优先级，如果使用得当的话，可以大大影响（降低）你应用的加载时间。

缓存和并行加载的资源分割

第三方代码分割

一个典型的应用会依赖很多第三方的框架和库文件。不像应用代码本身，这些第三方代码的变更非常频繁。 如果我们保持这些库在它本身的代码包中，从应用代码本身分离出来，那么我们就可以使用浏览器的缓存策略去在一个长时间内把这些代码缓存到最终用户的机器上。

为了达到这个效果，第三方代码的 verndor 包的 hash 部分必须保持不变，不管应用代码如何变化。学习 Read more