[英]How can I check output of webpack merge
我正在尝试在我的 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"
]
}
]
}
我遇到了同样的问题(我使用的是 webpack 4)。 我的配置分为 3 个文件:common、dev 和 prod; 正如webpack 指南所解释的那样;
要记录合并的配置,您可以执行以下操作:
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'
],
}
]
},
它按我的预期工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.