Webpack入门教程六

33.安装babel及相关依赖

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

34.修改webpack.config.js配置文件,修改内容如下

module.exports = {
	entry:  __dirname + "/app/Greeter.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	devServer:{
		contentBase:"./public",
		historyApiFallback:true,
		inline:true
	},
	module:{
		loaders:[
			{
				test:/\.json$/,
				loader:"json-loader"
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				loader:'babel-loader',
				query:{
					presets:['es2015','react']
				}
			}
		]
	}
}

35.安装react和react-dom模块

cnpm install --save-dev react react-dom

36.修改main.js文件,修改内容如下

// var config = require("../config.json");

// module.exports = function() {
//   var greet = document.createElement('div');
//   greet.textContent = config.greetText;
//   return greet;
// };
import React,{Component} from 'react';
import config from '../config.json';

class Main extends Component{
	render(){
		return (
			<div>
				{config.greetText}
			</div>
		);
	}
}

export default Main

37.修改Greeter.js文件,修改内容如下

// var greeter = require('./main.js');

// document.getElementById('root').appendChild(greeter());

import React from 'react';
import {render} from 'react-dom';
import Main from './main';

render(<Main />,document.getElementById('root'));

38.使用webpack命令打包

webpack

39.在浏览器中打开index.html文件,输出内容如下

转载于:https://blog.51cto.com/suyanzhu/1899060