本文旨在记录 webpack v2.x 与 v1.x 之间的区别。

1. 增加了对 ES6 模块的原生支持

2. 可以混用 ES2015 和 AMD 和 CommonJS

3. 支持 tree-shaking 以减少打包后的体积

要想使用 Webpack 中提供的 tree-shaking 功能,需要参见另一篇详细讲解的文章。
今天,你升级Webpack2了吗? (由阿里巴巴国际UED在推酷上发布)

4. 新增更多的 cli 参数项

-p 指定当前的编译环境为生产环境,即设置 process.env.NODE_ENVproduction

5. 配置选项有较大的改动且不向下兼容

5.1 resolve 解析字段

  1. 取消了 extentions 中的空字符串值(表示导入文件无后缀名)
    相当于默认配置了
  2. moudlesDiectories 字段名改成 modules,且数组中元素为绝对路径

区别大致如下:

1
2
3
4
5
6
7
8
9
10
11
// Webpack 1.x 写法
resolve: {
extensions: ['', '.js', '.css'],
modulesDirectories: ['node_modules', 'src']
}

// Webpack 2.x 写法
resolve: {
extensions: ['.js', '.css'],
modules: ['node_modules', 'src']
}

5.2 module 模块字段

  1. 外层 loaders 字段改为 rules
  2. 内层 loaders 字段改为 use
  3. 所有插件必须加上 -loader,不再允许缩写
  4. 不再支持用 ! 符链接插件,而改为数组形式
  5. json-loader 可以省略,不再需要手动添加,Webpack 2.x 会自动处理
  6. loader 配置的额外参数不在使用 query 字段,改用 options 字段

区别大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Webpack 1.x 写法
module: {
loaders: [{
test: /\.(less|css)$/,
loader: "style!css!less!postcss"
},{
test: /.json$/,
loader: "json"
},{
test: /\.(png|jpg|jpeg|gif|svg|ttf)$/,
loader: "url-loader",
query: {
limit: 2000, name: 'dist/[name].[ext]?[hash:8]'
}
}]
}

// Webpack 2.x 写法
module: {
rules: [{
test: /\.(less|css)$/,
use: [
"style-loader",
"css-loader",
"less-loader",
"postcss-loader"
]
},{
test: /\.(png|jpg|jpeg|gif|svg|ttf)$/,
use: [ //最规范的写法
{ loader: 'url-loader', options: { limit: 2000, name: 'dist/[name].[ext]?[hash:8]' } }
],
}]
}

5.3 plugins 插件字段

  • 移除了 OccurenceOrderPlugin 插件,Webpack 2.x 中默认加载
    另外,Webpack 1.x 中该插件名字为 OccurenceOrderPlugin,Webpack 2.x 中修正为 OccurrenceOrderPlugin
  • 移除了 NoErrorsPlugin 插件,Webpack 2.x 中默认加载

区别大致如下:

1
2
3
4
5
6
7
8
9
// Webpack 1.x 写法
plugins: [
new webpack.optimize.OccurenceOrderPlugin()
]

// Webpack 2.x 写法
plugins: [
- new webpack.optimize.OccurrenceOrderPlugin() //不用显示引入,会自动加载
]