The time to compile with webpack this error is triggered : you may need an appropriate loader to handle this file type.
I use: -npm3.10.10 -node6.10.3
This is my project files:
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>
via sylencehero
No comments:
Post a Comment