显示React的编译错误

Question

我以前通常会像在教程中建议的那样启动React，并在此上下文中显示编译错误。

现在，我已经为一个React项目设置了webpack config，当它不编译时，只有一个空白页。

有没有办法在终端或浏览器页面上显示这些错误？

谢谢你的答案

编辑：

var config = { 
    entry: './main.js', 

    output: { 
     path:'/Users/Martin/Documents/Projets_Web/API-CJ/build', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    } 
} 

module.exports = config; 

Answer 1

可以控制统计的WebPack输出到终端通过一个统计设置对象的水平。这里是我的服务器应用程序的相关部分（节点+快递+的WebPack DEV）

if (process.env.NODE_ENV === 'development') { 

    // dynamically require webpack dependencies 
    // to them in devDependencies (package.json) 
    const webpackConfig = require('../../webpack/development.webpack.config') 
    const webpackDevMiddleware = require('webpack-dev-middleware') 
    const webpackHotMiddleware = require('webpack-hot-middleware') 
    const webpack = require('webpack') 

    const compiler = webpack(webpackConfig) 

    app.use(webpackDevMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    stats: webpackConfig.stats, 
    progress: true, 
    hot: true 
    })) 

    app.use(webpackHotMiddleware(compiler)) 

} else { 

    // compression middleware compresses your server responses 
    // which makes them smaller (applies also to assets). 
    // You can read more about that technique and other good 
    // practices on official Express.js docs http://mxs.is/googmy 
    app.use(compression()) 

    app.use(express.static(path.resolve(process.cwd(), './dist'))) 
} 

在我的WebPack配置：

module.exports = { 

    devtool: 'source-map', 

    context: path.join(__dirname, '..'), 

    entry: { 
    bundle: [ 
     'webpack-hot-middleware/client', 
     path.resolve('./src/client/index.js') 
    ] 
    }, 

    output: { 
    path: path.resolve(__dirname, '../dist'), 
    filename: "[name].js", 
    publicPath: '/' 
    }, 

    stats: { 
    // Add asset Information 
    assets: true, 
    // Sort assets by a field 
    assetsSort: "field", 
    // Add information about cached (not built) modules 
    cached: true, 
    // Add children information 
    children: true, 
    // Add chunk information (setting this to `false` allows for a less verbose output) 
    chunks: false, 
    // Add built modules information to chunk information 
    chunkModules: true, 
    // Add the origins of chunks and chunk merging info 
    chunkOrigins: false, 
    // Sort the chunks by a field 
    chunksSort: "field", 
    // Context directory for request shortening 
    context: "../src/", 
    // `webpack --colors` equivalent 
    colors: true, 
    // Add errors 
    errors: true, 
    // Add details to errors (like resolving log) 
    errorDetails: true, 
    // Add the hash of the compilation 
    hash: false, 
    // Add built modules information 
    modules: false, 
    // Sort the modules by a field 
    modulesSort: "field", 
    // Add public path information 
    publicPath: false, 
    // Add information about the reasons why modules are included 
    reasons: false, 
    // Add the source code of modules 
    source: false, 
    // Add timing information 
    timings: true, 
    // Add webpack version information 
    version: true, 
    // Add warnings 
    warnings: false 
    }, 

    // ... rest of config ... 

对于生产版本，我使用的是这样的：

const webpack = require('webpack') 

function webpackCompiler (webpackConfig) { 

    return new Promise((resolve, reject) => { 

    const compiler = webpack (webpackConfig) 

    compiler.run((err, stats) => { 

     if (err) { 

     console.log('Webpack compiler encountered a fatal error.', err) 
     return reject(err) 
     } 

     const jsonStats = stats.toJson() 

     console.log(stats.toString(webpackConfig.stats)) 

     resolve(jsonStats) 
    }) 
    }) 
} 

module.exports = webpackCompiler