近日项目要升级到webpack2.2,原来使用的webpack版本是1.12,在升级项目的同时,翻译一下官方的升级文档,去掉了一些不常用的配置

resolve.rootresolve.fallbackresolve.modulesDirectories,这三个选项现在全部合并到resolve.modules一个选项中。关于resolving,查看更多  

resolve.extensions

这个配置项不再强制要求传入一个空字符串,这个行为被移动到了resolve.enforceExtension配置项

resolve.*

更多不常用的配置项不再一一列出来,详情请查看 resolving,查看更多

module.loaders 现在转换为 module.rules

功能更强大的rules系统取代了老版本中的loader,但是老的moduler.loader写法依然是被支持的,新的命名规则更加通俗易懂,非常建议使用新的module.rules。

链式loaders

同webpack1.x类似,链式loaders继续支持链式写法,匹配到的文件可以从一个loader传递到下一个loader,在新的rule.use配置项中,可以通过use项来指定需要用到的loader列表,在webpack1.x中需要用!来分割不同的loader,新版本只在module.loader中支持这种写法。

现在在配置loader的时候不允许省略-loader扩展名,例如:style-loader不可以简写为style

如果你想继续使用省略-loader的写法,你可以在resolveLoader.moduleExtensions配置省略的-loader,不过不建议这么做

json-loader不再是必须的,无需再单独安装

在没有为json文件配置loader的时候,webpack会默认自动使用json-loader来加载json文件

在 webpack 1 中,loader 默认配置下 resolve 相对于被匹配的文件。而在 webpack 2 中默认配置的 resolve 相对于 context 配置项。

这解决了一些问题,比如使用 npm link 或引用 context 之外的模块时导致重复载入。

移除了module.preloaders和module.postLoaders

UglifyJsPlugin sourceMap

UglifyJsPlugin 的 sourceMap 配置项现在默认为 false 而不是 true

这意味着如果你在压缩代码时启用了 source map,或者想要让 uglifyjs 的警告能够对应到正确的代码行,你需要将 UglifyJsPlugin 的 sourceMap 设为 true

UglifyJsPlugin warnings

UglifyJsPlugin 的 compress.warnings 配置项现在默认为 false 而不是 true

这意味着如果你想要看到 uglifyjs 的警告信息,你需要将 compress.warnings 设为 true

UglifyJsPlugin minimize loaders

UglifyJsPlugin 不再压缩 loaders。在未来很长一段时间里,需要通过设置 minimize:true 来压缩 loaders。参考 loader 文档里的相关配置项。

loaders 的压缩模式将在 webpack 3 或更高的版本中被取消。

为了兼容旧的 loaders,loaders 可以通过插件来切换到压缩模式:

DedupePlugin 现在是被默认加载的

从你的配置文件中移除webpack.optimize.DedupePlugin

BannerPlugin 大变化

BannerPlugin不再接收两个参数,取而代之的是一个对象

OccurrenceOrderPlugin 不再需要手动加入,现在是默认的

ExtractTextWebpackPlugin 大变化

ExtractTextPlugin 1.0.0 不能在 webpack v2 下工作。 你需要安装ExtractTextPlugin v2。

npm install --save-dev extract-text-webpack-plugin@beta

新的ExtractTextPlugin插件的配置也发生了大变化

require.ensure和 AMD require 是异步的

现在这些函数总是异步的,而不是当 chunk 已经加载过的时候同步调用它们的 callback。

注意 require.ensure 现在依赖于原生的 Promise。如果在不支持 Promise 的环境里使用 require.ensure,你需要添加 polyfill。

使用options来配置loader

webpack.config.js中将不再允许使用自定义属性来配置loder,例如:在ts配置项中的自定义属性将无法在被在webpack2中正确使用:

options是什么?

严格来说,有两种办法,都可以用来配置 webpack 的 loader。典型的 options 被称为 query,是一个可以被添加到 loader 名之后的字符串。它比较像一个 query string,但是实际上有更强大的能力:

不过它也可以分开来,写成一个单独的对象,紧跟在 loader 属性后面:

LoaderOptionsPlugin context

有的 loader 需要从配置中读取一些 context 信息。在未来很长一段时间里,这将需要通过 loader options 传入。详见 loader 文档的相关选项。

为了保持对旧 loaders 的兼容,这些信息可以通过插件传进来:

debug

在 webpack 1 中 debug 配置项切换 loaders 到 debug 模式。在将来很长一段时间里,这将需要通过 loader 配置项传递。详见 loader 文档的相关选项。

loaders 的 debug 模式将在 webpack 3 或后续版本中取消。

为了保持对旧 loaders 的兼容,loader 可以通过插件来切换到 debug 模式。

ES6代码分割

在 webpack v1 中,你能使用 require.ensure 作为方法来懒加载 chunks 到你的应用中:

ES2015 模块加载规范定义了 import() 方法来运行时动态地加载 ES2015 模块。

webpack 将 import() 作为分割点并将被请求的模块放到一个单独的 chunk 中。

import() 接收模块名作为参数,并返回一个 Promise。

好处是:如果加载 chunk 失败,我们可以进行处理,因为现在它基于 Promise

警告:require.ensure 允许用可选的第三个参数为 chunk 简单命名,但是 import API 还未提供这个功能。如果你想要保留这个功能,你可以继续使用 require.ensure

动态表达式

可以传递部分表达式给 import()。这与 CommonJS 对表达式的处理方式一致(webpack 为所有可能匹配的文件创建 context)。

import() 为每一个可能的模块创建独立的 chunk。

混合使用es6、AMD、CommonJS

你可以自由混合使用三种模块类型(甚至在同一个文件中)。在这个情况中 webpack 的行为和 babel 以及 node-eps 一致:

但是请注意,不能让babe解析这些模块,从而让 webpack 可以使用它们。你可以通过设置如下配置到 .babelrc 或 babel-loader 来实现这一点。

Hints

模板字符串

webpack 现在支持表达式中的模板字符串了。现在你可以这样使用:

配置中使用 Promise

webpack 现在支持在配置文件中返回 Promise 了。这让你能在配置文件中做异步处理。

高级 loader 匹配

ebpack 现在支持对 loader 进行更多方式的匹配。

webpack1.x 升级到 webpack2.x 英文文档翻译的更多相关文章

  1. es6英文文档翻译

    ECMA-262英文文档翻译,github地址: https://github.com/zhoushengmufc/es6 ECMA-262英文文档翻译,在线地址: http://zhoushengf ...

  2. Java8所有的包介绍(由英文文档翻译而来)

    转载: Java8所有的包介绍(由英文文档翻译而来)

  3. Java 调用翻译软件实现英文文档翻译

    前言: 因最近要进行OCP的考试准备.看着大堆英文文档确实有些疼痛.又因文档内容有点大,又需要逐一去翻译 又很费时费力.于是 百度了一番,找到一些 可以使用Java来调用百度翻译软件的API( 注:( ...

  4. Android英文文档翻译系列(1)——AlarmManager

      原文:个人翻译,水平有限,欢迎看官指正.                                                              public class Ala ...

  5. 官网GitLab CI/CD英文文档翻译

    在查阅GitLab官网的CI/CD功能说明时,全是英文看起来不方便,通过翻译软件自动翻译后"内容失真",看起来很变扭.查阅了百度上的资料发现很多翻译很老旧,有些甚至是挂羊头卖狗肉. ...

  6. k8s 英文文档翻译

    https://medium.com/google-cloud/understanding-kubernetes-networking-pods-7117dd28727 

  7. Android英文文档翻译系列(6)——LocalBroadcastManager

    public class LocalBroadcastManager extends Object java.lang.Object    ↳ android.support.v4.content.L ...

  8. Android英文文档翻译系列(5)——VPNService

      API14位于android.net.VpnService 类概述|Class OverviewVpnService is a base class for applications to ext ...

  9. Android英文文档翻译系列(4)——PopupWindow

    public class PopupWindow extends Object //直接继承至Object java.lang.Object ↳ android.widget.PopupWindow  ...

随机推荐

  1. 安装php扩展后,执行时找不到扩展 class xxx no found

    当编译安装一个新的php扩展,例如安装redis, 安装后 执行 new Redis(), 如果发现找不到class Redis,可以先检查redis.so文件是否在php的扩展目录下, 如果发现是, ...

  2. 硬件和软件兼容i2c协议的24Cxx系列EEPROM存储器(转)

    源:硬件和软件兼容i2c协议的24Cxx系列EEPROM存储器 硬件上由于24c01的A0A1A2管脚不允许悬空,故暂时的想法是兼容24c02 ---24c16 使用一个dip8封装的芯片插座,A0 ...

  3. LPC1768定时器普通定时

    //其他通道的基本定时功能都能在这里实现 void Time0Mr0Init(u32 arr,u32 psc) { LPC_SC->PCONP |= (1<<1);          ...

  4. 怎样判断iOS App是通过哪种途径启动的?

    http://www.cnblogs.com/daguo/p/3759514.html - (BOOL)application:(UIApplication *)application didFini ...

  5. linux命令学习-1-less

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  6. stm8的独立看门狗与窗口看门狗

    STM8拥有两个硬件看门狗,分别叫做独立看门狗和窗口看门狗 独立看门狗的框图如下 我们可以看到,独立看门狗的时钟来自于LSI内部低速振荡器,经过二分频到达看门狗外设单元,在经过一个七位的预分频到达计数 ...

  7. UIAlertView使用全解

    举例: UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Default Alert View"messa ...

  8. STL中list用法

    本文以List容器为例子,介绍了STL的基本内容,从容器到迭代器,再到普通函数,而且例子丰富,通俗易懂.不失为STL的入门文章,新手不容错过! 0 前言 1 定义一个list 2 使用list的成员函 ...

  9. TSP问题 遗传算法 智能优化算法

    写了半天,效率还是有点低的,以后有空再优化下: //用次序表示法来表示个体编码 #include<iostream> #include<fstream> #include< ...

  10. iOS 操作系统整体架构层次讲解

    iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa Touch l ...