Javascript React babel loader-您可能需要一个适当的加载器来处理此文件类型_Javascript_Node.js_Reactjs_Npm_Webpack

Javascript React babel loader-您可能需要一个适当的加载器来处理此文件类型

javascript node.js reactjs npm webpack

Javascript React babel loader-您可能需要一个适当的加载器来处理此文件类型,javascript,node.js,reactjs,npm,webpack,Javascript,Node.js,Reactjs,Npm,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

使用网页包编译的时间触发此错误：您可能需要适当的加载程序来处理此文件类型

我使用以下库：

这是我的项目文件：

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);

从“React”导入React；
从“react dom”导入react dom；
类布局扩展了React.Component{
render（）{
返回(
霍拉·蒙多
);
}
}
const app=document.getElementById（'app'）；
ReactDOM.render（，app）；

index.html

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


反应

您的测试表达式错误，它在

/\（js|jsx）？$/

使用

或

除此之外，您还需要更改React组件的名称，以大写字符开头。看到这个答案了吗

从“React”导入React；
从“react dom”导入react dom；
类布局扩展了React.Component{
render（）{
返回(
霍拉·蒙多
);
}
}
const app=document.getElementById（'app'）；
ReactDOM.render（，app）；

这两个选项编译失败。除了正则表达式没有区别，它们怎么会编译失败呢？或者我没有正确地写答案，我把这两个选项放在一起，但编译失败，可能是另一回事。它在哪里产生编译错误？我把输出cmd的img放在顶部

test: /\.jsx?$/,

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

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);