随着前端项目规模不断壮大，ES6+的盛行，前端工程化也变得越来越重要：模块化（JS、CSS、静态资源）、规范化、自动化。Angular1为了能够让代码更加健壮、方便维护，自然应当拥抱ES6。
写这篇博客的初衷来自于公司内部的项目，基于angular1开发的xxx管理系统。目前，前端三大主流框架：react、vue、angular2+均有了自己的脚手架，它们的出现解放了开发人员的双手，不必自己去配置webpack，只需要在命令行中输入指令即可实现项目构建、目录生成、打包等等操作。相比较而言，angular1的出身比较早，并没有一个很好的脚手架帮助我们完成这些操作。因此，我自己手写了一个webpack配置，制定了一些规则，使用者只需要简单的几步就可以着手开发。如果你有webpack基础，阅读起来将会十分轻松。
2018.3.6号修改
项目正式命名为angular-custom-cli，访问github查看源码。
目前根据该配置搭建了更加利于使用的angular-m-cli：ng init、ng add、ng list、ng delete，使用以上四个命令能够帮助你快速构建angular多页应用。
上手
一、安装
请确保自己的电脑已经安装了node.js，若未安装可以直接从node中文网下载。
若未安装webpack，请全局安装
npm install webpack -g
下载示例代码
git clone https://github.com/1335382915/angular-custom-cli.git
进入到项目中，安装全部依赖
npm install
现在，你的目录结构应该长这个样子：
二、说明
Entry和pages是两个最重要的文件夹。Pages存放着所有页面，每个页面均被一个文件夹包裹。Entry结构与pages相同，存放着每个页面的入口文件。必须保证entry和pages的结构相同，且每个html和js的命名一致（比如html全叫index，js全叫main）。
打开其中一个index.html，内容如下：
一个很简单的html页面。你会发现页面引入了两个根本不存在的js文件：
<script type="text/javascript" src="/vendor.__bundle.js"></script>
<script type="text/javascript" src="/home/main.__bundle.js"></script>
纵观整个项目的文件你都不会找到这两个js，然而实际上在webpack-dev-server下它是可以跑通的（打包后的文件被存放到了内存中）。
三、使用
现在我们运行项目，在控制台输入npm start，浏览器会自动打开一个页面：
修改css文件和js文件后浏览器均会自动更新页面的内容，实现热更新。
我们可以输入npm run dev进行开发模式下的打包，你会发现vendor.__bundle.js和main.__bundle.js会被打包进了entry文件夹里面。
在一般情况下，npm run dev这个命令我们不会用到，使用npm start进行开发就足够了。
删除刚刚产生的文件后，运行npm run build，文件被打包进了build里，所有打包后的文件均比npm run dev产生的文件小很多。
你会发现打包后的vendor.bundle.js和main.bundle.js都被自动引入到了body最下面，而head标签内也多了一个main.bundle.css。现在就可以把那两个内存文件删掉了。直接双击打开html，运行结果与开发模式相同。
开发分为两种模式：开发模式和生产模式。运行npm start和npm run dev均会开启开发模式，运行npm start会开启本地服务器，并且会在内存中生产打包后的文件；运行npm run dev会打包开发模式代码，生成到entry文件夹内（通用的代码会被打包到vendor.__bundle.js，每个页面自己的js代码会被打包到main.__bundle.js里，import的css文件和框架均被打包到main.__bundle.js里），此时不会开启服务器，内存中的文件也没有了，若想运行代码，必须要手动在html页中引入打包后的文件。运行npm run build会进入生产模式，此时打包后的文件会放进build里（vendor.bundle.js、main.bundle.js，此时import的css文件会被抽离到main.bundle.css中，框架不会被打包到main.bundle.js里，你需要使用cdn），但是会被自动引入到html中，不需要自己引入。
四、相关配置
Pages、entry、index.html、main.js等这些文件的命名都是可以修改的，只需要更改webpack.config.js里的相关配置即可。
/*
* 配置html文件路径
* 每个页面文件夹的入口html名称
* 配置入口js文件路径
* 通用js文件夹
* 每个页面的入口js
* 默认打开的页面的文件夹名称
* 端口号
*/
var customConfig = {
htmlDir: 'pages',
htmlEntry: 'index.html',
jsDir: 'entry',
jsCommonDir: 'common',
jsEntry: 'main.js',
serverEntryDir: 'sellerCenter',
devServerPort: 3000
}
如何添加公共模块？
//指定一个公共js的路径并添加到vendor数组里即可
//这里将/common/app.js作为公共文件
var commonModule1 = path.resolve(__dirname, customConfig.jsCommonDir + '/app');
var entry = {
vendor: [commonModule1]
};
五、11月23日更新
现在新增了mock服务，输入npm start启动服务器之后，在浏览器上输入localhost:3005，你会进入到mock服务器的接口配置页面，我们在该页面上新建一个接口（注意，接口路径必须从/开始）：
点击submit后接口即创建成功。现在我们在代码中发送一个get请求：
$scope.getData=function(){
$http({
method: 'GET',
url: '/testGet.json'
}).then(
function successCallback(response){
// 请求成功执行代码
console.log(response.data)
},
function errorCallback(response) {
// 请求失败执行代码
}
);
}
可以看到，即便后台并没有实现这个接口，依旧能够返回期望的数据。现在，我们就可以进行前后端分离式开发了。
至此，你可以开始拓展项目了~
