Javascript 如何检查网页包合并的输出
我试图在我的网页包资产上运行google closure编译器,但收到了关于网页包样式加载程序中问题的警告。但是我认为样式加载器不会出现在任何js资产中,因为我使用MiniCssExtractPlugin来获得一个单独的css文件 两个问题:Javascript 如何检查网页包合并的输出,javascript,webpack,Javascript,Webpack,我试图在我的网页包资产上运行google closure编译器,但收到了关于网页包样式加载程序中问题的警告。但是我认为样式加载器不会出现在任何js资产中,因为我使用MiniCssExtractPlugin来获得一个单独的css文件 两个问题: 在生产模式下,我如何通过webpack.config.js访问的输出?(我可以在命令行上执行一些操作来查看合并结果吗?) 我如何才能让合并像我预期的那样工作,即不使用样式加载器进行生产 代码: const merge = require("webpac
- 在生产模式下,我如何通过webpack.config.js访问的输出?(我可以在命令行上执行一些操作来查看合并结果吗?)
- 我如何才能让合并像我预期的那样工作,即不使用样式加载器进行生产
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"
]
}
]
}
我也有同样的问题(我正在使用Webpack4)。
我的配置分为3个文件:common、dev和prod;as
要记录合并配置,可以执行以下操作:
var merged\u config=merge(公共、{
模式:"生产",,
模块:{
规则:[
{
测试:/\.减去$/,,
用途:[
MiniCssExtractPlugin.loader,
“css加载程序”,
“更少的装载机”
],
}
]
},
插件:[
新的MiniCssExtractPlugin()
]
});
module.exports=merged_config;
log(JSON.stringify(merged_config));
正如您在上面的代码中所看到的,我重写了规则以在生产模式下生成css包。在我的公共配置中,我有以下内容:
模块:{
规则:[
{
测试:/\.tsx?$/,,
加载器:“ts加载器”,
},
{
测试:/\.html$/,,
加载器:“原始加载器”
},
{
测试:/\.减去$/,,
用途:[
“样式加载器”,
“css加载程序”,
“更少的装载机”
],
}
]
},
它的工作原理和我预期的一样