1.熟悉Webpack
构建运用前我们先来相识一下Webpack, Webpack是一个模块打包东西，能够把种种文件（比方：ReactJS、Babel、Coffeescript、Less/Sass等）作为模块举行编译后举行打包。
2.装置Webpack
要最先运用Webpack在项目中举行开辟前我们起首须要在全局环境中举行装置。
npm install webpack -g
3.建立一个项目
装置好后建立一个名叫learn-webpack的项目并进入该项目文件夹，固然项目名字你能够起你本身想要的名字。
mkdir learn-webpack && cd learn-webpack
经由过程编辑器找到你方才所建立的项目文件夹
如今我们来建立2个文件:
app.js
document.querySelector('#app').innerHTML = 'Hello World!';index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn-webpack</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>然后在终端实行
webpack ./app.js ./dist/bundle.js
末了实行启动当地的http效劳
python -m SimpleHTTPServer
这个时刻你就能够在浏览器输入:
假如你能在浏览器内里看到Hello world!那申明你已胜利的应用Webpack把main.js打包并编译到了bundle.js.是否是很简朴？
定义一个设置文件
上面的只是对Webpack的运用举行了一些简朴的引见，实际上每一个项面前目今都应该包括一个webpack.config.js，用来通知Webpack须要做些什么。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
}
}如今在终端中运转：
webpack
看看是否是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译效果一样。
entry：指定打包的进口文件
1.单个文件打包为单个输出文件，直接写该文件的名字，比方：entry:”main.js”
2.多个文件打包为单个输出文件，将文件名放进一个数组，比方：entry:[‘main.js’,’xx.js’]
3.多个文件打包为多个输出文件，将文件名放入一个键字对，比方：entry: {a:’main.js’,b:’xx.js’}
output：设置打包效果
path为定义输出文件夹，filename为打包效果文件的称号，假如指定打包进口文件为上面的1、2种状况，filename内里直接跟你想输出的文件名。若为第3种状况filename内里需写成[name].文件名.js，filename内里的[name]为entry中的键。
监听变化自动打包
当我们在不断的对代码举行更改的时刻，为了不修正一次然后又手动去举行打包一次。能够运用webpack的watch功用。
webpack –watch 或许 webpack -w
或许能够直接在设置代码内里把watch设置为true
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
watch: true
}4.运用Babel
Babel是什么？Babel 是一个 JavaScript 编译器。运用它能够将ES6的语法转换为ES5的语法，以便在如今有的环境实行。
在终端实行:
npm install webpack babel-loader babel-core babel-preset-es2015 –save-dev
实行装置完成后须要将之前的webpack.config.js修正为:
module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}如今就能在文件内里以ES6的语法举行代码编写，我们来测试一下，在app.js到场:
var func = str => {
console.log(str);
};
func('我如今在运用Babel!');ES6支撑用箭头体式格局来定义函数，假如你能在控制台看到“我如今在运用Babel!”的打印笔墨，申明我们的Babel模块装置胜利，能够最先运用ES6举行代码编写了。
loaders项内里示意用来加载这类范例的资本的loader，loader的运用能够参考 using loaders，更多的loader能够参考 list of loaders。
test，是一段正则，示意举行婚配的资本范例。
exclude为指定应该被疏忽的文件，我们在这儿指定了/node_modules/。
query有2种写法，拜见query-parameters, 一种是直接以字符串情势跟在loader名后：
loader: 'babel-loader?presets[]=es2015另一种如本文所示：
query: {
presets: ['es2015']
}resolve.extensions 用于指明顺序自动补全辨认哪些后缀,
注重一下, extensions 第一个是空字符串! 对应不须要后缀的状况.
5.连系React
前面我们已对Webpack和Babel举行了设置并做了一些引见，基本的环境已搭建好了，如今我们最先在运用React。
终端输入以下代码对react和react-dom举行装置
npm install react react-dom –save
Babel针对React的一切的预设插件
npm install babel-preset-react –save-dev
因为我们增加了react的预设插件，所以须要对webpack.config.js举行修正。
将module -> loaders下面的query修正以下：
query: {
presets: ['es2015','react']
}如今建立一个名为hello.js的文件
import React from "react";
class Hello extends React.Component{
render() {
return (
<div>
Hello, World!
</div>
)
}
}
export default Hello;然后将app.js内里的文件修正以下：
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";
// var func = str => {
// console.log(str);
// };
//
// func('我如今在运用Babel!');
// document.querySelector('#app').innerHTML = 'Hello World!';
ReactDOM.render(
<Hello />,
document.querySelector('#app')
);
假如你能在浏览器内里看到 “Hello, React!”，就申明我们已将Webpack+Babel+React的环境搭建好了，接下来我们就能够此基本上来举行开辟了。
