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

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

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

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

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

npm install webpack -g

因?yàn)橐玫絘ngular，所以要安裝angular：

npm install angular

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

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

注意：除了webpack是全局安裝之外，其他組件都是安裝在app文件夾下面，會(huì)自動(dòng)生成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",[]);//定義一個(gè)angular模塊
3 require("./directives/hello-world/hello-world.js")(ngModule);//引入指令(directive)文件
4 require("./css/style.css");//引入樣式文件

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

 1
 2 
 3 
 4   
 5