我正在尝试对我的webpack资产运行google封闭编译器,但收到有关webpack样式加载器中问题的警告。但是我认为样式加载器不会出现在任何js资产中,因为我正在使用MiniCssExtractPlugin来获取单独的CSS文件。
两个问题:
代码:
const merge = require("webpack-merge");
var common = {
....
module: {
rules: [
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
// see https://github.com/webpack-contrib/css-loader#url
loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
},
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: ["style-loader", "css-loader?url=false"]
},
...
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false"
]
},
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
"sass-loader"
]
}
]
}
答案 0 :(得分:0)
我遇到了同样的问题(我正在使用webpack 4)。 我的配置分为3个文件:common,dev和prod;为webpack guide explain;
要记录合并的配置,可以执行以下操作:
var merged_config = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
});
module.exports = merged_config;
console.log(JSON.stringify(merged_config));
并且正如您在上面的代码中看到的那样,我重写了规则以在生产模式下生成CSS捆绑包。在我的通用配置中,我有这个:
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
}
]
},
它按我的预期工作!