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文件,输出内容如下