真的就是手痒才更新到2的…
更新 写此文时，webpack更新到2.1.0-beta.27。
首先运行更新命令：npm install [email protected] --save-devnpm install [email protected] --save-dev
更新完之后，webpack 2 兼容老版本的配置，所以直接运行是没有问题的。据说 webpack 2 的 tree-shaking 还可以优化体积。
迁移 去webpack官网扫了一眼，虽然v2兼容v1的，但v2修改了配置文件的语法。https://webpack.js.org/guides/migrating/
列举影响最深的两条:
####module.loaders is now module.rules
####module.loaders 更改为 module.rulesmodule.loaders 语法仍然能被解析。然而，新的命名规范更易理解，推荐将配置文件更新为使用 module.rules 语法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module: {
- loaders: [
+ rules: [
{
test: /\.css$/,
- loaders: [
+ use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
- query: {
+ options: {
modules: true
}
]
}
]
}
####Automatic -loader module name extension removed-loader extension when referencing loaders:
####在模块名后自动补上 -loader 后缀的功能被移除-loader 后缀：1
2
3
4
5
6
7
8
loaders: [
- "style",
+ "style-loader",
- "css",
+ "css-loader",
- "less",
+ "less-loader",
]
You can still opt-in to the old behavior with the resolveLoader.moduleExtensions configuration option.resolveLoader.moduleExtensions 配置项，继续使用以前的格式。1
2
3
resolveLoader: {
moduleExtensions: ["-loader"]
}
愉快的改好webpack.config.js，接下来开始曲折的趟坑之旅。
蹚坑 满心欢喜的build一发。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
$ npm run build
> gulp build
[15:28:59] Using gulpfile ~/Documents/nodejs/hdzx_v4_html/gulpfile.js
[15:28:59] Starting 'clean'...
[15:28:59] Finished 'clean' after 21 ms
[15:28:59] Starting 'build'...
[15:28:59] Starting 'style'...
[15:28:59] Finished 'style' after 21 ms
[15:28:59] Starting 'webpack'...
[15:28:59] Finished 'webpack' after 297 ms
[15:28:59] Finished 'build' after 320 ms
[15:29:01] Plumber found unhandled error:
Error in plugin 'webpack-stream'
Message:
./src/js/approve/index.js
Module parse failed: /Users/j3l11234/Documents/nodejs/hdzx_v4_html/src/js/approve/index.js Unexpected token (180:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (180:6)
at Parser.pp$4.raise (/Users/j3l11234/Documents/nodejs/hdzx_v4_html/node_modules/.npminstall/acorn/3.3.0/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/Users/j3l11234/Documents/nodejs/hdzx_v4_html/node_modules/.npminstall/acorn/3.3.0/acorn/dist/acorn.js:603:10)
```
诶？这和剧本写的不一样啊？check一下配置文件：
module: {1
无肉眼可见的配置错误，不过提示**You may need an appropriate loader to handle this file type.**，也就是loader没有载入出来。经过几个世纪的测试，最后试了一条命令：
$ ./node_modules/webpack/bin/webpack.js
+ 189 hidden modules
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
直接去调用 node_modules 里的 webpack 是成功的，使用 gulp 就不行，而 gulp 借助 webpack-stream 来实现 webpack 调用，莫非是 webpack-stream 的问题？翻出 webpack-stream 的 `package.json`：
```json
{
"name": "webpack-stream",
"version": "3.2.0",
"description": "Run webpack as a stream",
"license": "MIT",
"homepage": "https://github.com/shama/webpack-stream",
"repository": "shama/webpack-stream",
"author": {
"name": "Kyle Robinson Young",
"url": "http://dontkry.com"
},
"engines": {
"node": ">= 0.10.0"
},
"scripts": {
"test": "semistandard && node test/test.js"
},
"files": [
"index.js"
],
"semistandard": {
"ignore": [
"test/fixtures",
"examples"
]
},
"dependencies": {
"gulp-util": "^3.0.7",
"lodash.clone": "^4.3.2",
"lodash.some": "^4.2.2",
"memory-fs": "^0.3.0",
"through": "^2.3.8",
"vinyl": "^1.1.0",
"webpack": "^1.12.9"
},
"devDependencies": {
"gulp": "^3.9.0",
"rimraf": "^2.4.4",
"semistandard": "^7.0.4",
"tape": "^4.2.2",
"vinyl-fs": "^2.2.1",
"vinyl-named": "^1.1.0"
},
"keywords": [
"gulpplugin",
"webpack",
"stream"
],
"_resolved": "http://registry.npm.taobao.org/webpack-stream/download/webpack-stream-3.2.0.tgz"
}
```
OMG，webpack-stream 依赖的是 webpack^1.12.9 ，于是在使用 gulp 的时候，最终调用的还是 webpack^1.12.9，于是配置里的 rules 不被识别， loader 声明无效， build错误也就是完全可以理解的了。
老方法，看源码：
```javascript
module.exports = function (options, wp, done) {
...
var webpack = wp || require('webpack');
...
};
```
看到闪闪发光的一行，webpack-stream 是可以注入 webpack 实例的，如果不注入，就使用 `require('webpack')` 引入 webpack-stream 自身所依赖的 webpack^1.12.9 。
怒改 `gulpfile.js`，在调用 webpack-stream 的时候手动传入 `require('webpack')` 。
```javascript
gulp.task('webpack-watch', function() {
gulp.src('./src/js/**/*.js')
.pipe(plumber())
.pipe(webpack(Object.assign(require('./webpack.config.js'),{watch:true}),require('webpack')))
.pipe(gulp.dest(DIST + '/js'));
});
gulp.task('webpack', function() {
gulp.src('./src/js/**/*.js')
.pipe(plumber())
.pipe(webpack(require('./webpack.config.js'),require('webpack')))
.pipe(gulp.dest(DIST + '/js'));
});
再 build 一把，一次OK：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
$ npm run build
> gulp build
[17:05:48] Using gulpfile ~/Documents/nodejs/hdzx_v4_html/gulpfile.js
[17:05:48] Starting 'clean'...
[17:05:48] Finished 'clean' after 6.6 ms
[17:05:48] Starting 'build'...
[17:05:48] Starting 'style'...
[17:05:48] Finished 'style' after 14 ms
[17:05:48] Starting 'webpack'...
[17:05:48] Finished 'webpack' after 348 ms
[17:05:48] Finished 'build' after 364 ms
[17:06:00] Version: webpack 2.1.0-beta.27
Asset Size Chunks Chunk Names
order.js.map 238 kB 0 [emitted] order
order.js 230 kB 0 [emitted] order
myorder.js 169 kB 2 [emitted] myorder
approve.js 172 kB 3 [emitted] approve
issue.js 145 kB 4 [emitted] issue
login.js 101 kB 5 [emitted] login
common.js 729 kB 6 [emitted] common
lock.js 183 kB 1 [emitted] lock
lock.js.map 195 kB 1 [emitted] lock
myorder.js.map 184 kB 2 [emitted] myorder
approve.js.map 190 kB 3 [emitted] approve
issue.js.map 161 kB 4 [emitted] issue
login.js.map 121 kB 5 [emitted] login
common.js.map 894 kB 6 [emitted] common
老哥，稳。
后记 台上一分钟，台下十年功，博客写的6，其实找问题的时候真的想疯。然后，不看 github 真是太傻了，下次遇到问题一定要到全球最大的同性交友平台问问！https://github.com/shama/webpack-stream/issues/125