React babel loader - 你可能需要一个合适的 loader 来处理这个文件类型答案

【问题标题】：React babel loader - you may need an appropriate loader to handle this file typeReact babel loader - 你可能需要一个合适的 loader 来处理这个文件类型
【发布时间】：2017-11-02 19:52:54
【问题描述】：

用webpack编译的时候触发了这个错误：你可能需要一个合适的加载器来处理这个文件类型。

我使用这个库：

这是我的项目文件：

package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server --content-base app --inline --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/dist/index.js",
  module:{
      loaders:[
          {
              test:/\.(js | jsx)?$/,
              exclude:/(node_modules|bower_components)/,
              loader:'babel-loader',
              query:{
                  presets:['react', 'es2015', 'stage-0'],
                  plugins:['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
              }
          }
      ]
  },
  output: {
    path: __dirname + "/app/js",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

index.js

import React from "react";
import ReactDOM from "react-dom";

class layout extends React.Component{
    render(){
        return (
            <h1>Hola Mundo</h1>
        );
    }
}

const app = document.getElementById('app');
ReactDOM.render(<layout/>, app);

index.html

<DOCTYPE html>
    <html>
        <head>
            <tittle>React</tittle>
        </head>
        <body>
            <div id="app"></div>
            <script src="index.min.js"></script>
        </body>
    </html>

【问题讨论】：

标签： javascript node.js reactjs npm webpack

【解决方案1】：

你的测试表达式错误，/\.(js | jsx)?$/中有多余的空格

使用

test: /\.jsx?$/,

或

test: /\.(js|jsx)$/,

除此之外，您还需要将 React 组件的名称更改为以大写字符开头。看到这个答案React - Adding component after AJAX to view

import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component{
    render(){
        return (
            <h1>Hola Mundo</h1>
        );
    }
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

【讨论】：

这两个选项编译失败。
除了regex没有区别，怎么会编译失败
对不起，我没有正确写出我的答案，我把这两个选项都放了，但编译失败，也许是别的东西。
它在哪里给出了编译错误
我把输出cmd的img放在最上面