webpack 中 enforce 的一个实际用法

当我们在 webpack 中集成 eslint 和 babel 的时候，一般会采用如下的写法：

module.exports = {
	// ...
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: ['babel-loader', 'eslint-loader']
			}
		]
	}
	// ...
}

这种写法需要注意 use 中的执行顺序是从右往左，一旦写反了，eslint 就会校验 babel 转换后的代码。

如果你对 use 的执行顺序不清楚，可以采用下面的写法：

module.exports = {
	// ...
	module: {
		rules: [
			{
				enforce: 'pre',
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'eslint-loader'
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			}
		]
	}
	// ...
}