摘要：一什么是是一個前端的模塊管理工具，以下是的官網，一進入官網可以看到下面這張大圖這張圖基本上解釋了是用來干嘛的，將一些相互依賴的模塊文件，打包成一個或多個文件，減少請求次數，提升性能。希望這篇文章可以幫助大家入門。

　　Webpack是一個前端的模塊管理工具(module bundler)，以下是webpack的官網：http://webpack.github.io/，一進入官網可以看到下面這張大圖：

這張圖基本上解釋了webpack是用來干嘛的，將一些相互依賴的模塊(文件)，打包成一個或多個js文件，減少http請求次數，提升性能。這些相互依賴的模塊可以是圖片、字體、coffee文件、樣式文件、less文件等。

　　具體怎么用呢？接下來我將用一個例子來說明：

安裝Webpack之前建議先安裝Node.js，然后采用npm的方式來安裝Webpack：

npm install webpack -g

因為要用到angular，所以要安裝angular：

npm install angular

還要安裝一系列加載器(loader)：

npm install style-loader css-loader url-loader sass-loader raw-loader

注意：除了webpack是全局安裝之外，其他組件都是安裝在app文件夾下面，會自動生成node_modules文件夾。

 1 module.exports = {
 2   context: __dirname + "/app",//上下文
 3   entry: "./index.js",//入口文件
 4   output: {//輸出文件
 5     path: __dirname + "/app",
 6     filename: "./bundle.js"
 7   },
 8   module: {
 9     loaders: [//加載器
10       {test: /.html$/, loader: "raw"},
11       {test: /.css$/, loader: "style!css"},
12       {test: /.scss$/, loader: "style!css!sass"},
13       {test: /.(png|jpg|ttf)$/, loader: "url?limit=8192"}
14     ]
15   }
16 };

1 var angular = require("angular");//引入angular
2 var ngModule = angular.module("app",[]);//定義一個angular模塊
3 require("./directives/hello-world/hello-world.js")(ngModule);//引入指令(directive)文件
4 require("./css/style.css");//引入樣式文件

require用于引入外部模塊(可以是對象，可以是函數，可以是css樣式，可以是html頁面等)

 1
 2 
 3 
 4   
 5