我正在将当前项目升级到以前使用Webpack1的Webpack2。我研究了一些有关升级的教程,总的来说,我确实了解。
不过,我一直遇到的问题是,我不确定在指定模块规则(加载器)时应何时使用“ 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
}
}
];
在解决其他问题之前,我只会在这里停留。有人可以帮忙解释一下我在这里缺少什么吗?随意询问您需要帮助的其他任何代码!
先感谢您。
正如Webpack 2迁移教程所指出的,两者之间的区别在于,如果我们要使用一组加载程序,则必须使用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"
]
}
]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句