create-react-app 使用craco修改webpack编译时输出隐藏日志信息

前言：create-react-app 项目名，创建出一个项目来，使用yarn start的时候发现输出很多的日志信息，这些日志信息开发的时候像我这种只有做项目优化的时候才想看到，但是进行开发的时候我们并不想看到。

如图：

如何使用 craco修改webpack参考这篇

create-react-app craco进行webpack配置(修 改篇)

不过不能完全安照他的来，安装的时候要使用yarn add来安装使用npm可能装不上。

然后我只说怎么屏蔽这些输出，如果在craco.config.js文件你直接这样直接加stats为’errors-only’你发现他并不会生效。

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'),//别名    
      },
    stats:'errors-only',//直接加stats为'errors-only'你发现他并不会生效
  },
}

这时候就要想到用configure给他一个webpackConfig的返回值它才会生效。

  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.stats='errors-only'//这样才会生效
      // console.log(webpackConfig);//不懂怎样修改的可以看一下webpackConfig有啥，然后对它的一直配置进行修改。
      return webpackConfig
    },

我的练手craco.config.js配置

const CracoLessPlugin = require('craco-less')
const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const webpack=require('webpack');
const WebpackBar = require('webpackbar');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.stats='errors-only'//这样才会生效
           // 修改build的生成文件名称
      paths.appBuild = 'dist';
      webpackConfig.output ={
        ...webpackConfig.output,
        path:path.resolve(__dirname,'dist'),
        publicPath:'/'
      }//修改输出为dist文件
      // console.log(webpackConfig);//不懂怎样修改的可以看一下webpackConfig有啥，然后对它的一直配置进行修改。
      return webpackConfig
    },
    alias: {
      '@': pathResolve('src'),//别名
    },
    plugins:[
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false,
                    //代码最紧凑
                    drop_debugger: true,
                    //清楚console
                    drop_console: true,
                },
            },
            sourceMap: false,
            parallel: true,
        }),
        new WebpackBar()//增加一个进度条
    ],
     //抽离公用模块
     optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: 'initial',
                    minChunks: 2, maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        }
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
      	// 根据 less-loader 版本的不同会有不同的配置
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}

然后这样看起来就舒服多了

更多属性值可以看官网

官网

总结，如果你要用修改webpack,通过configure，然后通过console.log(webpackConfig);//对它进行查看当前的webpack配置，当然像别名 alias在外面修改它也会生效，通过console.log(webpackConfig)是可以看到的。修改create-react-app的webpack配置有很多方法。