webpack2 + React
How to set ReactJs with webpack2
This is just simple app with React + webpack2.
Create project and install dependencies
mkdir react-demo cd react-demo npm init -y npm i babel-core babel-loader babel-preset-es2015 webpack -D npm i babel-preset-react webpack-dev-server -D npm i react react-dom -S
.babelrc
Set es2015 and react
{ "presets": [ "es2015", "react" ] }
webpack.config.js
const path = require('path'); const webpack = require("webpack"); module.exports = { entry: path.join(__dirname, 'src/app.js'), output: { path: path.join(__dirname, 'public'), filename: 'bundle.js' }, devServer: { contentBase: 'public', port: 8080, inline: true }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] } };
src/app.js
import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render() { return <p>Hello React!</p>; } } render(<App/>, document.getElementById('app'));
dist/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html>
※ Please prepare html plugin to resolve javascript file in the future.
Start and Test it!
npm run start
Run webpack-dev-server (with compile)
You can access localhost:8080/index.html