脚本宝典收集整理的这篇文章主要介绍了从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
"手动是不可能手动的了,这辈子都不可能手动的了。"
一、目标
上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变得混乱不堪:
现在先对当前项目文件列表进行整理,将五大模块移入src文件夹中:
然后修改index.htML中的js引用路径:
<script src="src/pokemon/pokemon.js"></script>
<script src="src/skill/skill.js"></script>
<script src="src/hagberry/hagberry.js"></script>
<script src="src/PRop/prop.js"></script>
<script src="src/game/game.js"></script>
<script src="src/app.js"></script>
再分别修改每个模块js文件中的templateUrl,使其指向文件位置:
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/pokemons', {
templateUrl: 'src/pokemon/pm-list.html',
controller: 'PMListController'
})
.when ('/pokemon/:no', {
templateUrl: 'src/pokemon/pm-detail.html',
controller: 'PMDetailController'
})
}])
简单修改一下之后项目瞬间整洁了许多,但是如果以后工程变得更大,将会有越来越多的第三方库、环境工具包、样式库及图片库加入项目,这样项目整理维护难度肯定会随着项目的扩大而不断加大,所以我们需要一个编译打包工具来协助我们对项目文件进行管理打包,以方便开发的推进。
二、分析
参考网上文章对grunt、gulp、webpack三种打包工具的分析比对,grunt的配置较为复杂且效率不高所以先舍弃,gulp的配置简单和流式工作比较吸引,但是显然webpack的模块化特性与AngularJS的机制具有更好的相性,于是本项目选中Webpack作为项目的打包工具。
三、开发
3.1 安装
参考webpack指南,安装webpack最新版本(当前版本4.6.0):
yarn add webpack --save-dev
3.2 起步
A. 简化工程,完成初始打包
现在准备开始使用Webpack4.6.0打包工程,但是由于是初学Webpack,所以先将工程简化为最简版本,即先不加入多模块,只留下index.html和src/app.js,index.html代码如下: