安裝Webpack及其他元件
安裝Webpack之前建議先安裝Node.js，然後採用npm的方式來安裝Webpack：
npminstallwebpack-g
因為要用到angular，所以要安裝angular：
npminstallangular
還要安裝一系列載入器(loader)：
npminstallstyle-loadercss-loaderurl-loadersass-loaderraw-loader
注意：除了webpack是全域性安裝之外，其他元件都是安裝在app資料夾下面，會自動生成node_modules資料夾。
3.配置檔案webpack.config.js
4.入口檔案index.js
require用於引入外部模組(可以是物件，可以是函式，可以是css樣式，可以是html頁面等)
5.主頁面index.html
可以看到主頁面是非常乾淨清爽的，只引入了一個輸出檔案bundle.js，然後html標籤里加了ng-app="app"。
6.指令檔案hello-world.js
module.exports用於將模組(檔案)作為一個介面(一般是一個函式)暴露給外部。
7.其他檔案(style.css、hello-world.html、hello-world.scss)
8.編譯和執行
在命令列工具中輸入：webpack，即可編譯，這時我們會遇到第一個坑：
這個錯誤的關鍵行在"Youmayneedanappropriateloadertohandlethefiletype"，大概意思就是你的載入器(loader)不正確，可是我們明明安裝上了所有的載入器啊，也在配置檔案中引用了呀，原來問題出在配置檔案中的"module"下的"loader"應該是"loaders"，就因為少了一個"s"，浪費我一上午的時間。
修改過來之後，編譯通過了，我們在瀏覽器中開啟主頁面index.html，這時遇到了第二個坑：
大概意思是你跨域了，不能載入hello-world.html這個檔案，問題出在指令檔案hello-world.js中的引用模板地址的程式碼：
templateUrl:"directives/hello-world/hello-world.html"
在網上搜到一個解決辦法，就是使用Node.js自帶的的http-server.
使用之前要先安裝express：npminstallexpress，然後在命令列工具中輸入nodeserver.js開啟服務，這時在瀏覽器中輸入：localhost:8000/index.html即可訪問主頁面。
另外一個方法是用require的方式引入hello-world.html：
template:require("./hello-world.html")
安裝Webpack及其他元件
安裝Webpack之前建議先安裝Node.js，然後採用npm的方式來安裝Webpack：
npminstallwebpack-g
因為要用到angular，所以要安裝angular：
npminstallangular
還要安裝一系列載入器(loader)：
npminstallstyle-loadercss-loaderurl-loadersass-loaderraw-loader
注意：除了webpack是全域性安裝之外，其他元件都是安裝在app資料夾下面，會自動生成node_modules資料夾。
3.配置檔案webpack.config.js
4.入口檔案index.js
require用於引入外部模組(可以是物件，可以是函式，可以是css樣式，可以是html頁面等)
5.主頁面index.html
可以看到主頁面是非常乾淨清爽的，只引入了一個輸出檔案bundle.js，然後html標籤里加了ng-app="app"。
6.指令檔案hello-world.js
module.exports用於將模組(檔案)作為一個介面(一般是一個函式)暴露給外部。
7.其他檔案(style.css、hello-world.html、hello-world.scss)
8.編譯和執行
在命令列工具中輸入：webpack，即可編譯，這時我們會遇到第一個坑：
這個錯誤的關鍵行在"Youmayneedanappropriateloadertohandlethefiletype"，大概意思就是你的載入器(loader)不正確，可是我們明明安裝上了所有的載入器啊，也在配置檔案中引用了呀，原來問題出在配置檔案中的"module"下的"loader"應該是"loaders"，就因為少了一個"s"，浪費我一上午的時間。
修改過來之後，編譯通過了，我們在瀏覽器中開啟主頁面index.html，這時遇到了第二個坑：
大概意思是你跨域了，不能載入hello-world.html這個檔案，問題出在指令檔案hello-world.js中的引用模板地址的程式碼：
templateUrl:"directives/hello-world/hello-world.html"
在網上搜到一個解決辦法，就是使用Node.js自帶的的http-server.
使用之前要先安裝express：npminstallexpress，然後在命令列工具中輸入nodeserver.js開啟服務，這時在瀏覽器中輸入：localhost:8000/index.html即可訪問主頁面。
另外一個方法是用require的方式引入hello-world.html：
template:require("./hello-world.html")