webpack1.x 升级到 webpack2.x 英文文档翻译
近日项目要升级到webpack2.2,原来使用的webpack版本是1.12,在升级项目的同时,翻译一下官方的升级文档,去掉了一些不常用的配置
resolve.root
, resolve.fallback
, resolve.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 英文文档翻译的更多相关文章
- es6英文文档翻译
ECMA-262英文文档翻译,github地址: https://github.com/zhoushengmufc/es6 ECMA-262英文文档翻译,在线地址: http://zhoushengf ...
- Java8所有的包介绍(由英文文档翻译而来)
转载: Java8所有的包介绍(由英文文档翻译而来)
- Java 调用翻译软件实现英文文档翻译
前言: 因最近要进行OCP的考试准备.看着大堆英文文档确实有些疼痛.又因文档内容有点大,又需要逐一去翻译 又很费时费力.于是 百度了一番,找到一些 可以使用Java来调用百度翻译软件的API( 注:( ...
- Android英文文档翻译系列(1)——AlarmManager
原文:个人翻译,水平有限,欢迎看官指正. public class Ala ...
- 官网GitLab CI/CD英文文档翻译
在查阅GitLab官网的CI/CD功能说明时,全是英文看起来不方便,通过翻译软件自动翻译后"内容失真",看起来很变扭.查阅了百度上的资料发现很多翻译很老旧,有些甚至是挂羊头卖狗肉. ...
- k8s 英文文档翻译
https://medium.com/google-cloud/understanding-kubernetes-networking-pods-7117dd28727
- Android英文文档翻译系列(6)——LocalBroadcastManager
public class LocalBroadcastManager extends Object java.lang.Object ↳ android.support.v4.content.L ...
- Android英文文档翻译系列(5)——VPNService
API14位于android.net.VpnService 类概述|Class OverviewVpnService is a base class for applications to ext ...
- Android英文文档翻译系列(4)——PopupWindow
public class PopupWindow extends Object //直接继承至Object java.lang.Object ↳ android.widget.PopupWindow ...
随机推荐
- poj1328贪心中的区间问题
题意:给定海岛个数.雷达半径以及各海岛坐标,求能覆盖所有海岛的最小雷达数. 思路:先对每个海岛求一个区间:即能覆盖它的所有雷达的圆心所构成的区间.然后对区间排序,定义一个最右点over,依次延伸ove ...
- 适用于SQl数据的Sql语句
---基础知识if exists(select * from sysdatabases where name='Exam') ---判断数据库中是否存在该数据库drop database Examgo ...
- 关于iOS开发中info.plist文件的解读
我们建立一个工程后,会在Supporting files下面看到一个"工程名-Info.plist"的文件,这个是对工程做一些运行期配置的文件,很重要,不能删除. 下面就对其ke ...
- 编译时.test文件报错无法解决的方法,关闭test编译
有几次遇到从网上下载到的iOS开源代码编译报错,报错位置为Test Target的源文件,我就挺奇怪我又没做测试为啥会编译Test Target的源文件,之前的暴力解决方法是把Test Target直 ...
- 关于css中的border
我一直以为css中的border是正方形的 像这样 因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来 当我给每一个边分别设置颜色的时候才发现 他们是以梯形 ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
- KMP算法深入解析
本文主要介绍KMP算法原理.KMP算法是一种高效的字符串匹配算法,通过对源串进行一次遍历即可完成对字符串的匹配. 1.基础知识的铺垫 字符串T的前k(0 =< k <=tlen)个连续的字 ...
- Core Data 应用程序实践指南(Core Data 应用程序实践指南)
译者序 前言 勘误 1. 初次尝试Core Data应用程序 本书的基础,基本概念,能做什么,不能做什么.实现CoreDataHelper类,演示如何将Core Data同既有的应用程序相集成. 2. ...
- iOS 之 自动释放池
向一个对象发送autorelease消息时,cocoa会将该对象的一个引用放入最新的自动释放池.作用域结束时,自动释放池会被释放,池中所有的对象也就被释放了.
- js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...