我正在将当前项目升级到 Webpack2 ,之前它正在使用 Webpack1 。我已经看了几个关于升级的教程,总的来说,我明白了。
我遇到的问题是,我不确定何时在指定模块规则(加载器)时使用'use'和'loader'。起初,我认为use
已取代loader
。我理解这种语法:
module: {
rules: [{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
plugins: ...
}
},
'sass-loader'
]
}]
}
然而,当我使用ExtractTextPlugin
时,它似乎不喜欢它被认为是use
。我试过这个:
{
test: /\.scss$/,
use: [
{
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: scssLoaders
})
}]
},
,scssLoaders
为:
var scssLoaders = [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: '2',
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
sourceMapContents: true
}
}
];
在我解决其他问题之前,我会停在这里。有人可以帮忙解释一下我在这里缺少什么吗?随意询问您需要帮助的任何其他代码!
提前谢谢。
答案 0 :(得分:39)
正如Webpack 2 migration tutorial所述,两者之间的区别在于,如果我们想要一个加载器数组,我们必须使用use
,如果它只是一个加载器,那么我们必须使用loader
:
module: {
rules: [
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
答案 1 :(得分:11)