最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化。经过一番抉择之后选择了 webpack + Angular 的组合。所以在这里分享一下具体的实践流程。

Webpack

Webpack是目前比较流行的前端打包工具，它同时支持amD、CMD两种模块写法，也原生支持npm或者bower安装的模块。它还能给css、scss、less、coffeescript、es6、图片、htML以及诸如jade、ejs的模板打包。

所以有什么卵用呢？

简单地说就是，

1、原来你需要在<script>中引入angular或者其他的npm模块（有些npm模块甚至没有提供可以直接在浏览器端引用的js文件），现在只需要：

npm install angular

然后在app.js中：

angular = require('angular');
VAR app = angular.module('myApp',[]);

然后执行

webpack app.js bundle.js

webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。

2、组件化的时候你要在页面中引入一大堆东西，比如这样：