盒子
文章目录
  1. 前言
  2. eslint配置修改
  3. 最后分析一下 eslint-loader的源代码 处理配置的部分

webpack 2.1.0-beta.23 大改动, 对应eslint配置处理

前言

一直都是用webpack2的beta版本。其实和1相比,API变化并不大。
但是就在昨天,webpack2发布了beta.23
从版本号来看,貌似只是个小迭代,但其实是一个breaking change!

删除 module中的preLoaders 和preLoaders
并且限制了module.exports的第一层key, 很多属性变成了unknow property的警告
unknow

更多具体的变化可以查看release wiki

eslint配置修改

既然webpack的api改了,有一些配置就无效甚至弹出警告
在我的配置里,主要是eslint

旧的webpack config (主要列出eslint部分, 方便阅读)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
// ...
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: [/node_modules/],
}
]
loaders: [
//...
]
}
//...
eslint: {
configFile: './.eslintrc.js'
}
//...
}

主要错误就两处, 废话不多说, 先上修改后的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
//...
module: {
loaders: [
{
enforce: 'right',
test: /\.js$/,
loader: 'eslint-loader',
query: {
configFile: './.eslintrc.js'
},
exclude: [/node_modules/]
},
//...
]
}
//...
}

用 enforce: ‘right’ 代替preLoaders, 然后configFile写在query里面,效果和 { eslint: {}} 是一样的。
这样webpack就不会再报错啦 ;)

configFile的处理也可以这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack');

module.exports = {
//...
plugins: [
//...
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
/* your eslint loader config */
}
}
})
]
}

参考

最后分析一下 eslint-loader的源代码 处理配置的部分

eslint-loader index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = function(input, map) {
var config = assign(
// loader defaults
{
formatter: require("eslint/lib/formatters/stylish"),
},
// user defaults
this.options.eslint || {},
// loader query string
loaderUtils.parseQuery(this.query)
)

//...
}

其中的
this.options.eslint 对应的是旧版webpack的{eslint: {}}, 在新版中则需要在webpack.LoaderOptionsPlugin赋值传递参数

this.query 对应loader中的query: {}

assign会把这两个对象合并起来, 同时前者会覆盖后者。

所以这两种写法都可以, 我个人比较喜欢写在query里面,这样在loader里,更清晰一些