React babel loader - 你可能需要一个合适的加载器来处理这种文件类型 [英] React babel loader - you may need an appropriate loader to handle this file type
本文介绍了React babel loader - 你可能需要一个合适的加载器来处理这种文件类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
用webpack编译的时候触发这个错误:您可能需要一个合适的加载器来处理这种文件类型.
The time to compile with webpack this error is triggered : you may need an appropriate loader to handle this file type.
我使用这个库:
这是我的项目文件:
package.json
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
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>
推荐答案
你的测试表达式有误，/\.(js | jsx)?$/
使用
test: /\.jsx?$/,
或
test: /\.(js|jsx)$/,
除此之外，您还需要将 React 组件的名称更改为以大写字符开头.请参阅此答案 React - 在 AJAX 之后添加组件以查看
Apart from this you will need to change the name of your React Component to begin with Uppercase character. See this answer 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);
这篇关于React babel loader - 你可能需要一个合适的加载器来处理这种文件类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
