webpack+react配置

安装依赖项

在项目目录下 ，初始化一个 package.json 文件，执行：

npm init
安装 react 和 react-dom 依赖：

npm install react react-dom --save
安装 webpack 和 webpack-dev-server 依赖：

npm install webpack webpack-dev-server --save-dev
安装 babel 依赖：

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

/**
* Created by joesbell on 2016/12/16.
*/
var webpack=require("webpack");
var path = require('path');
var appPath=path.resolve(__dirname, './app/main.js');
var  buildPath= path.resolve(__dirname, './build');

module.exports = {
entry:[
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
appPath
],
output: {
path:buildPath,
filename: 'bundle.js',
},
module: {
// 将jsx语法文件转为js语法，es6转成es5
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader?presets[]=es2015,presets[]=react']
}]
},
// module: {
//     loaders: [{
//         test: /\.jsx?$/,
//         exclude: /node_modules/,
//         loader: 'babel-loader',
//     }]
// },

// 将es6代码转化为es5
babel: {
presets: ['es2015']
},
};

/**
* Created by joesbell on 2016/12/16.
*/
import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
render() {
return <h1>Hello</h1>
}
}

ReactDOM.render(<Hello />, document.getElementById('content'));

import Hello from './component/productBox.js';
import Hello1 from './component/hello.js';

"scripts": {"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},

npm run dev

http://localhost:8080。

entry: [
　　　　　　//自动刷新加载
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
APP_PATH
],