reactjs - 本机模块解析失败

Question

我想在网页上看到我的应用程序，我该怎么办？我点击了这个链接 https://github.com/simonqian/react-helloworld 但我没有得到答案？所以请提供一些链接来解决这个问题

在我使用 npm start 启动 npm 后，我遇到了这种类型的错误？如何解决这个问题？

这是我的 web.config.js 文件。我的配置文件将在根目录中

'use strict';

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: 'E:/react/webnative/main.js',

  output: {
    // path: 'E:/',
    filename: 'index.js',
  },

  devServer: {
    inline: false,
    port: 7777,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ['pug-loader?self'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        //exclude:/(node_modules|bower_components)/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  plugins: [new UglifyJSPlugin()],
};

Answer 1

你的 webpack 配置应该看起来像这样来读取 .jsx 文件：

module.exports = {
  entry: './app/assets/frontend/myFile.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
   loaders: [{
     test: /\.jsx?$/,
     loader: 'babel',
     exclude: /node_modules/,
     query: {
       cacheDirectory: true,
       presets: ['react', 'es2015']
     }
   }]
 }
}

或者只是不使用jsx。希望这可以帮助！