Webpack入门——使用Webpack打包Angular项目的一个例子

摘要：一什么是是一个前端的模块管理工具，以下是的官网，一进入官网可以看到下面这张大图这张图基本上解释了是用来干嘛的，将一些相互依赖的模块文件，打包成一个或多个文件，减少请求次数，提升性能。希望这篇文章可以帮助大家入门。

　　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