1
建立一個名叫learn-webpack項目，并進去項目目錄。
2
接下來我們來建立2個檔案:app.js和index.html，我們在也沒上輸出一個”hello world”，
app.js：
index.html
3
4
5
6
7
8
9
10
11
然後在終端執行如下指令：
實際上每個項目下都應該包含一個webpack.config.js，用來告訴webpack需要做些什麼，這個我們之前文章也說過。
接下來我們在終端運作指令，看看是不是和之前輸入 webpack ./app.js ./dist/bundle.js 的打包編譯結果一樣呢，答案是肯定的。
注：
entry：指定打包的入口檔案
單個檔案打包為單個輸出檔案，直接寫該檔案的名字，例如：entry:”main.js”
多個檔案打包為單個輸出檔案，将檔案名放進一個數組，例如：entry:[‘main.js’,’xx.js’]
多個檔案打包為多個輸出檔案，将檔案名放入一個鍵字對，例如：entry: {a:’main.js’,b:’xx.js’}
output：配置打包結果
path為定義輸出檔案夾，filename為打包結果檔案的名稱，如果指定打包入口檔案為上面的1、2種情況，filename裡面直接跟你想輸出的檔案名。若為第3種情況filename裡面需寫成[name].檔案名.js，filename裡面的[name]為entry中的鍵。
當我們在不停的對代碼進行變動的時候，為了不修改一次然後又手動去進行打包一次，可以使用webpack的watch功能。這也算是webpack的一個黑科技，以前做後端的時候必須重新部署，這個是很蛋疼的。
或者我們可以直接在配置代碼裡面把watch設定為true。
首先安裝basel。
執行安裝完成後需要将之前的webpack.config.js修改為:
12
13
14
15
16
17
18
19
20
21
22
現在就能在檔案裡面以es6的文法進行代碼編寫，如在app.js加入:
我們再次運作，如果看到輸出，就說明配置成功了。這裡有關loader的知識和配置就不講究了，大家可以網上補補。
終端輸入以下代碼對react和react-dom進行安裝：
安裝babel針對react的預設插件：
由于我們增加了react的預設插件，是以需要對webpack.config.js進行修改。将module -> loaders下面的query修改如下：
接下來我們建立一個hello.js.
在app.js做一下配置：