React +webpack 基础配置

首先确保安装了node.js,我们使用npm下载模块依赖

1.新建一个文件夹作为demoApp根目录

2. 

$ npm init  创建package.json

3. 创建基础文件windows下 cmd  cd.> app.jsx  cd.>webpack.config.js  cd.>main.js  cd.>index.html

4.配置webpack.config.js

var config = {
	//指定打包的入口文件
	entry: './main.js',
	//配置打包的结果,path定义输出的文件夹,filename定义了打包结果文件的名称
	output: {
		path:'./',
		filename: 'index.js',
	},
	//设置服务器端口号
	devServer: {
		inline: true,
		port: 7999
	},

	module: {
		loaders: [{
			test: /\.jsx?$/,
			exclude: /node_modules/,
			loader: 'babel',
			query: {
          		presets: ['react', 'es2015']
        	}
		}]
	}

}

module.exports = config;

5.安装依赖 

$ npm install --save-dev  react react-dom
$ npm install --save-dev  babel-core babel-loader babel-preset-es2015 babel-preset-react
$ npm install --save-dev webpack  webpack-dev-server
将scripts中start修改为webpack-dev-server --hot

6.启动 

$ npm start