本文介紹Webpack輔助ReactJS進行開發的簡單例子。
Webpack基礎詳解地址：http://2914905399.iteye.com/blog/2357893
簡單來說，webpack是一個模塊打包工具，在 webpack 裏，所有類型的文件都可以是模塊，包括我們最常見的 JavaScript，及 CSS 文件、圖片、json 文件等等。通過 webpack 的各種加載器，我們可以更高效地管理這些文件。
本文配置webpack並使網頁上輸出最簡單的Hello, World!!! 。程序使用React js完成並使用了ES2015。
1，創建一個空項目，在項目目錄下創建一個package.json 文件，用於項目名稱，依賴等等，終端命令如下：
npm init
2, 在當前目錄下安裝webpack以及其它依賴，由於使用React，所以引入了react和react-dom
npm install webpack react react-dom --save-dev npm install webpack -g
有時webpack需要獲取管理員權限才能安裝成功。sudo su之後再install即可解決
3， 此時目錄下只有package.json 和node_modules兩個文件，package.json中可以看到安裝過的依賴，node_modules是install時生成的。
實現簡單的HelloWorld，還需要創建一個index.html和一個入口文件index.js，出於簡單，我都放在根目錄。index.html爲空，index.js實現網頁輸出HelloWorld。代碼如下：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends Component {
render() {
return (
<div>
Hello, World ! ! !
</div>
)
}
}
ReactDOM.render(
<HelloWorld />,
document.getElementById('content')
);
4， 創建webpack配置文件webpack.config.js。並進行配置：
module.exports = {
entry: './index.js',
output: {
path: '',
filename: 'bundle.js'
}
};entry: 設置入口文件
output: path爲webpack打包成功之後文件存放路徑。 filename爲webpack打包成功之後文件名稱。
webpack.config.js這個名字爲webpack默認的配置文件，如果不想用這個名字，可以：
webpack -config yourname
5, 安裝和使用Webpack Loader。
Webpack Loader作用：
1，將React js的jsx語句轉化爲js語句
2，支持ES2015
3，可以是js文件通過import直接引入css等樣式以及圖片。
等等等。
因爲我需要使用Reactjs和ES2015，所以安裝命令如下：
npm install babel-core babel-loader --save-dev npm install babel-preset-react babel-preset-es2015 --save-dev
具體實現需要在webpack-config.js中加入module屬性。
module.exports = {
entry: './index.js',
output: {
publicPath: "",
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
}
};
6，在終端輸入webpack。會看見生成了一個bundle.js文件。這個文件是webpack的entry文件打包成功之後得到的，存放路徑和名字都是自己在webpack.config.js中設置的。
webpack
7，修改之前創建的index.html文件，並引入打包生成的bundle.js文件。代碼如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
8，打開index.html，將會看到我們需要的 Hello,World!!!。但是每次我們修改文件並運行時都需要在終端輸入webpack再刷新頁面。這種方式比較麻煩。此時我們需要使用webpack-dev-server來實現頁面自動刷新
（1）安裝webpack-dev-server
npm install webpack-dev-server --save-dev npm install webpack-dev-server -g
（2）在package.json中添加
{
......
"scripts": {
"start": "webpack-dev-server --inline"
},
......
}
（3）配置完成，在終端輸入：
npm start
在瀏覽器裏面輸入http://localhost:8080/ 頁面上出現Hello,World!!!。 修改main.js中的Hello,World!!!爲Hello,Curry!!!，等待兩秒，不需要手動刷新，頁面自動刷新，出現Hello,Curry!!!。 完成！！！
附參考網站：http://www.jianshu.com/p/418e48e0cef1
https://www.zfanw.com/blog/webpack-tutorial.html