知道了怎么样安装，那么学习一下简单的应用吧。
1.安装webpack
npm install webpack -g （全局） npm install webpack --save--dev （本地）
2.webpack的辅助文件
npm install babel-core npm install babel-loader npm install babel-preset-es2015 (解析es6) npm install babel-preset-react （解析jsx语法） npm install react （jsx语法支持） npm install react-dom （jsx语法支持）
3.新建src和dest，分别放源文件和打包后的文件。
4.新建webpack.config.js的文件
module.exports = {
entry: './entry.js', //入口
output: { //输出
path: __dirname,
filename: "./dest/bundle.js"
},
module: {
loaders: [{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { compact: false, presets: ['es2015', 'react'] }
}]
}
};
5.创建测试文件
在src源文件夹里面创建index.html文件。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>第一个react的例子</title> </head> <body> <div id="app"></div> </body> </html> <script src="./dest/bundle.js"> </script>
6.创建一个测试helloworld.js文件,这个文件我们用jsx和es6语法写。
'
'use strict';
//引入相关的包
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//es6语法
class HelloWorld extends Component {
render() {
return ( <h1> hello, world </h1>)
}
}
//渲染虚拟dom
ReactDOM.render( <
HelloWorld / > ,
document.getElementById('app')
);
7.完成后，我们跳出src目录，创建一个入口文件entry.js
require('../src/helloworld.js');
最终的文件目录结构：
8.运行
webpack，回车，过一会看到编译完成后，在dest文件夹下会多一个bundle.js文件，
然后进入src目录，双击index.html文件
源码及说明点此下载
或者访问：https://github.com/ZhangWeiStudy/React_Note/tree/master/WebReact/webpack_react
