在學習react 的時候必然會用到webpack打包工具，webpack的快速入門另外一篇文章中有記錄，這里只記錄webpack.config.js文件，因為每個項目下都必須配置，通俗的講，它的作用就是告訴Webpack要做什么。
一個最簡單的Webpack配置文件webpack.config.js如下所示：
module.exports = {
entry:[
'./app/main.js'
],
output: {
path: __dirname + '/assets/',
publicPath: "/assets/",
filename: 'bundle.js'
}
};
其中：
entry：定義了打包后的入口文件，數組中的所有文件會按順序打包。每個文件進行依賴的遞歸查找，直到所有相關模塊都被打包。
output：定義了輸出文件的位置，其中常用的參數包括：
- path: 打包文件存放的絕對路徑
- publicPath: 網站運行時的訪問路徑
- filename: 打包后的文件名
現在來看如何打包一個React組件。假設有如下項目文件夾結構：
- react-demo+ assets/
- js/
Hello.js
entry.js
index.html
webpack.config.js
其中Hello.js定義了一個簡單的React組件，使用ES6語法：
var React = require('react'); class Hello extends React.Component { render() { return ( <h1>Hello {this.props.name}!</h1> ); } }
entry.js是入口文件，將一個Hello組件輸出到界面：
var React = require('react'); var Hello = require('./Hello'); React.render(<Hello name="World" />, document.body);
index.html的內容如下：
<html> <head></head> <body> <script src="/assets/bundle.js"></script> </body> </html>
在這里Hello.js和entry.js都是JSX組件語法，需要對它們進行預處理，這就要引入webpack的JSX加載器。因此在webpack.config.js 配置文件中加入如下配置：
module: { loaders: [ { test: /\.jsx?$/, loaders: ['jsx?harmony']} ] }
加載器的作用是它能將JSX編譯成JavaScript並加載為Webpack模塊這樣在當前目錄執行webpack命令之后，在assets目錄將生成bundle.js，打包了entry.js的內容。當瀏覽器打開當前服務器上的index.html，將顯示“Hello World”。這是一個非常簡單的例子，演示了如何使用Webpack來進行最簡單的React組件打包。