Question

使用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>

Answer 1

您的测试表达式错误，/\.(js | jsx)?$/

中有额外的空格

使用

test: /\.jsx?$/,

或

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

除此之外，您还需要将React Component的名称更改为以大写字符开头。请参阅此回答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);

反应babel加载器 - 您可能需要一个合适的加载器来处理这种文件类型

1 个答案: