mini-css-extract-plugin 产生的大型控制台输出
Posted
技术标签:
【中文标题】mini-css-extract-plugin 产生的大型控制台输出【英文标题】:Large console output produced by mini-css-extract-plugin 【发布时间】:2019-11-04 06:45:07 【问题描述】:一直在尝试研究这个,但似乎没有其他人有这个,或者认为这是一个问题。
我在我的webpack.config.js
中使用mini-css-extract-plugin
(MiniCssExtractPlugin
)。
但是,当我运行 webpack
时,控制台上到处都是数百个类似的实例......
Child mini-css-extract-plugin ../../../node_modules/css-loader/index.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!ui/radiolist-toggler/RadioListToggler.scss:
Entrypoint mini-css-extract-plugin = *
[../../../node_modules/css-loader/index.js?!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss] /Users/~~~/git/user-section/node_modules/css-loader??ref--6-1!/Users/~~~/git/user-section/node_modules/postcss-loader/src!/Users/~~/git/user-section/node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss 5.33 KiB mini-css-extract-plugin [built]
+ 1 hidden module
我需要向上滚动几秒钟才能看到我的所有资产等。
我对 webpack 还很陌生,所以不确定如何防止它被输出到控制台?
下面是我的webpack.config.js
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const modernizr = require("modernizr");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports =
context: path.resolve(__dirname, 'src/main/client'),
entry: './index',
devtool: 'cheap-module-source-map',
optimization:
minimizer: [
new UglifyJsPlugin(
cache: true,
parallel: true,
uglifyOptions:
mangle: true,
compress: true,
ecma: 6
,
sourceMap: true
),
new OptimizeCssAssetsPlugin(),
],
splitChunks:
chunks: 'all'
,
plugins: [
new CompressionPlugin(
test: /\.js$|\.css$|\.html$|\.(png|svg|jpg|gif)$/,
cache: true,
filename: '[path].gz[query]',
algorithm: 'gzip',
threshold: 10240
),
new CleanWebpackPlugin([
'./target/webapp'
]),
new HtmlWebpackPlugin(
template: './index.html',
filename: '../index.html',
xhtml: true
),
new MiniCssExtractPlugin(
filename: "[name].css",
),
new CopyWebpackPlugin([
from: '../webapp/**/*',
to: '../'
]),
new webpack.DefinePlugin(
'process.env.NODE_ENV': '"production"'
),
],
output:
publicPath: '/app/',
filename: '[name].bundle.js',
chunkFilename: '[id].js',
path: path.resolve(__dirname, 'target/webapp/app/')
,
module:
rules: [
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/
,
test: /\.html$/,
exclude: /node_modules/,
use:
loader: 'html-loader'
,
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
loader: 'css-loader',
options:
importLoaders: 1
,
loader: 'postcss-loader'
,
loader: 'sass-loader'
]
,
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
,
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
loader: 'file-loader',
options:
name: '[name].[ext]',
outputPath: './assets/fonts/'
]
,
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
options:
presets: ["@babel/env"]
],
,
resolve:
alias:
// You can add comment "Please do not delete this file" in this file
modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
【问题讨论】:
不能改太多,可以试试webpack.js.org/configuration/stats 谢谢,设置stats: children: false
成功了!
【参考方案1】:
@mcclosa 在评论中提到了这一点,但如果有人看到这个问题,看不到答案并点击离开,解决方案是将 stats
选项添加到您的 webpack.config.js
文件中,如下所示:
module.exports =
stats: children: false ,
上述选项使用@mcclosa 建议的children: false
选项,它确实成功地删除了mini-css-extract-plugin 的垃圾输出,但我发现使用预设stats: "minimal"
会产生更好的整体输出。使用:
module.exports =
stats: "minimal",
..只要我的构建没有错误,就会给我以下微小的输出:
i 「wdm」: Compiling...
i 「wdm」: 69 modules
i 「wdm」: Compiled successfully.
..相对于几十行无用的构建数据,但在出现错误时会继续给出错误信息。
【讨论】:
【参考方案2】:很遗憾,mini-css-extract-loader 没有设置来控制其日志输出的详细程度。
在您的webpack.config.js
中将stats.children
设置为false
或"minimal"
可以删除许多其他有用的输出,例如您的包名称和大小、入口点信息、构建时间、合法警告和其他错误您可能想要保留的插件等。
相反,我们似乎必须添加一个在编译器的 done
挂钩上执行的插件,以从与 mini-css-extract-plugin 关联的 stats.compilation
对象中删除项目。
这个示例插件应该可以工作:
class CleanupMiniCssExtractPlugin
apply(compiler)
compiler.hooks.done.tap("CleanupMiniCssExtractPlugin", stats =>
if (this._children)
const children = stats.compilation.children;
if (Array.isArray(children))
stats.compilation.children = children.filter(
child => child.name.indexOf("mini-css-extract-plugin") == -1
);
);
或者你可以使用这个 npm 包:https://www.npmjs.com/package/cleanup-mini-css-extract-plugin
【讨论】:
以上是关于mini-css-extract-plugin 产生的大型控制台输出的主要内容,如果未能解决你的问题,请参考以下文章
mini-css-extract-plugin 产生的大型控制台输出
插件 mini-css-extract-plugin 使用的详解(二)
如何避免警告:块样式 [mini-css-extract-plugin] GatsbyJS 中的冲突顺序?