Be sure to npm install webpack -g
npm start
for one time compilation for productionnpm run dev
for dev watcher
{ | |
"presets": ["es2015", "react"] | |
} |
var React = require('react'); | |
var ReactDOM = require('react-dom'); | |
function HelloWorld(props) { | |
return <h1>Hello from react</h1>; | |
} | |
ReactDOM.render(<HelloWorld />, document.getElementById('app')); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>React hello</title> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script type="text/javascript" src="bundle.js"></script> | |
</body> | |
</html> |
{ | |
"name": "react-hello", | |
"version": "1.0.0", | |
"description": "React hello-world", | |
"main": "app.js", | |
"scripts": { | |
"start": "webpack -p", | |
"dev": "webpack -d -w" | |
}, | |
"author": "Thaer Abbas", | |
"license": "CC, Creative Commons", | |
"dependencies": { | |
"react": "^15.0.1", | |
"react-dom": "^15.0.1" | |
}, | |
"devDependencies": { | |
"babel-core": "^6.7.6", | |
"babel-loader": "^6.2.4", | |
"babel-preset-es2015": "^6.6.0", | |
"babel-preset-react": "^6.5.0" | |
} | |
} |
module.exports = { | |
entry: './app.js', | |
output: { | |
path: __dirname, | |
publicPath: "/assets/", | |
filename: "bundle.js" | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.js?$/, | |
exclude: /(node_modules|bower_components)/, | |
loader: 'babel?presets[]=es2015&presets[]=react' | |
} | |
] | |
}, | |
resolve: { | |
extensions: ['', '.js'] | |
} | |
}; |