如何将 create-react-app 使用的错误页面合并到自定义项目中？

Posted 2023-02-22

技术标签:

【中文标题】如何将 create-react-app 使用的错误页面合并到自定义项目中？【英文标题】：How can you incorporate the error page that create-react-app uses into a custom project? 【发布时间】：2018-05-30 15:55:31 【问题描述】：

当您使用 create react app 并在代码中出现错误时，您会看到这个非常详细和精确的错误页面：

如何将此错误页面合并到我自己的自定义项目中。我怀疑这需要一种 webpack 插件。我项目中的工具是：

node.js express.js 网页包巴别塔萨斯反应 redux

这是我当前的 webpack 配置：

import webpack from 'webpack'
import autoprefixer from 'autoprefixer'
import htmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin'


import helpers from './helpers'

const NODE_ENV = process.env.NODE_ENV
const isProd = NODE_ENV === 'production'

module.exports = 
  entry: 
    'app': [
      helpers.root('client/app/index.jsx')
    ]
  ,

  output: 
    path: helpers.root('dist'),
    publicPath: '/'
  ,

  resolve: 
    extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.html'],
    alias: 
      'app': 'client/app'
    
  ,
  stats: 
    colors: true,
    modules: true,
    reasons: true,
    errorDetails: true
  ,
  devtool: 'cheap-module-eval-source-map',
  module: 
    rules: [
      // absolutely necessary for font-awesome
      // you NEED the file-loader & css-loader modules
      
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
        loader: 'file-loader'
      ,
      // JS files
      
        test: /\.jsx?$/,
        include: helpers.root('client'),
        exclude: /node_modules/,
        use: [
          
            loader: "babel-loader",
            // options: 
            //   "presets": [["env", "modules": false], "react"]
            // 
          
        ]
      ,

      // SCSS files
      // or test: /(\.scss|\.sass)$/,
      // or test: /.(scss|sass)$/,
      // or test: /.s[ac]ss$/,
      // verdict: none of the above required!
      
        test: /.sass$/,
        loader: ExtractTextPlugin.extract(
          fallback: 'style-loader',
          use: [
            
              loader: 'css-loader',
              options: 
                'sourceMap': true,
                'importLoaders': 1
              
            ,
            
              loader: 'postcss-loader',
              options: 
                plugins: () => [
                  autoprefixer
                ]
              
            ,
            'sass-loader'
          ]
        )
      
    ]
  ,

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),

    new FriendlyErrorsPlugin(
      clearConsole: <false></false>
    ),

    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify(NODE_ENV)
      
    ),

    new HtmlWebpackPlugin(
      template: helpers.root('client/public/index.html'),
      inject: 'body'
    ),

    new ExtractTextPlugin(
      filename: 'css/[name].[hash].css',
      disable: !isProd
    ),

    new CopyWebpackPlugin([
      from: helpers.root('client/public')
    ])
  ]

【问题讨论】：

您是否查看了 create-react-app 源代码和依赖项以了解它们是如何做到的？ 【参考方案1】：

这是您正在寻找的包裹。希望这会有所帮助。