Webpack 的规则与装载机-有什么不同？

在一些 Webpack 示例中，您可以看到对“ rules”数组的引用:

module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
//if you want to pass in options, you can do so:
//new ExtractTextPlugin({
//  filename: 'style.css'
//})
]
}

(https://github.com/webpack-contrib/extract-text-webpack-plugin)

另一种是装载机阵列:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: "css-loader"
})
},
{ test: /\.png$/, loader: "file-loader" }
]
},
plugins: [
new ExtractTextPlugin({
filename: "style.css",
allChunks: true
})
]
};

(https://github.com/webpack/webpack/tree/master/examples/css-bundle)

有什么区别? 应该使用哪一个？

32756

小开

Loaders are used in Webpack 1
Rules are used in Webpack 2+

According to the migrating docs at the official Webpack site.

module.loaders is now module.rules

The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using module.rules.

Example of Delta

  module: {
-   loaders: [
+   rules: [
{
test: /\.css$/,
-       loaders: [
-         "style-loader",
-         "css-loader?modules=true"
+       use: [
+         {
+           loader: "style-loader"
+         },
+         {
+           loader: "css-loader",
+           options: {
+             modules: true
+           }
+         }
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
}
]
}