从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上) - 润新知

"手动是不可能手动的了，这辈子都不可能手动的了。"

一、目标

上一章我们借助ngRoute，完成了口袋妖怪SPA系统的多模块导航开发，但是现在引用的东西越来越多，项目文件目录开始变得混乱不堪：
项目文件列表.png

现在先对当前项目文件列表进行整理，将五大模块移入src文件夹中：
项目文件列表2.png

然后修改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代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="pokemon-app">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>口袋妖怪</title>
    <!-- <script src="libs/angular.js"></script>
    <script src="libs/angular-route.js"></script>
    <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> -->
    <script src="dist/bundle.js"></script>
    <link rel="stylesheet" href="app.css"/>
  </head>
  <body ng-controller="AppController">
    <h1>口袋妖怪管理系统</h1>
    <!-- <div>
      <h2>快速导航：</h2>
      <a href="/#!/pokemons">口袋妖怪</a>
      <a href="/#!/skills">技能</a>
      <a href="/#!/hagberrys">树果</a>
      <a href="/#!/props">道具</a>
      <a href="/#!/games">游戏</a>
    </div>
    <div ng-view></div> -->
    <p>{{test}}</p>
  </body>
</html>

index.html中我们做了两个处理：

1. 屏蔽所有的js引用，加入一条对bundle.js(即编译之后的js)的引用;
2. 屏蔽掉导航div和ngView的div，加入```<p>{{test}}</p>```;

经过处理之后，index.html 不再需要引用angular.js文件，只需要直接引用最终打包好bundle.js，angular加载的任务交给了app.js：

import angular from 'angular';      // 引入angular模块

(function () {
  'use strict';
  angular.module('pokemon-app', [
    // 'ngRoute',
    // 'pokemon-app.pokemon',
    // 'pokemon-app.skill',
    // 'pokemon-app.hagberry',
    // 'pokemon-app.prop',
    // 'pokemon-app.game'
  ])
  // .config (['$routeProvider', function ($routeProvider) {
  //   $routeProvider
  //     .otherwise({  
  //       redirectTo: '/pokemons'     // 初始化直接跳转到pokemon模块
  //     });
  // }])
  .controller('AppController', AppController);

  AppController.$inject = ['$scope'];
  function AppController ($scope) {
    $scope.test = "webpack success!";    // 加入测试文字以供显示
  }
})();

app.js中我们做了三个处理：

1. 开头用import语法引入angular模块;
2. 屏蔽掉所有模块的引用和路由配置;
3. 在AppController中加入*$scope.test = "webpack success!";*;

经过处理，app.js就能直接引入依赖库，这样的引用方式更加简洁明了，而且编译打包过程中将能够发现缺少依赖的问题，由此避免了因依赖不存在或者顺序错误问题导致的脚本执行错误。

现在依旧看看跟着官网-起步-创建一个 bundle 文件走，完成了上面对index.html & src/app.js的修改之后，我们开始尝试编译打包，我的Node.js版本是8.9.3，所以直接执行官网的命令：

npx webpack src/app.js --output dist/bundle.js

运行完提示请求安装webpack-cli，看到cli后缀就知道大概是封装了命令行输入之类的东西吧，直接跟着安装试试就行，输入yes然后发现居然还没动静了
npx命令运行结果.png

于是我中断安装然后自己输入安装webpack-cli的命令：

yarn add webpack-cli --save-dev

果然安装成功了，马上再次运行npx的编译指令~咦又报错了,直接拉到最后看Error信息：
npx编译失败.png

Error信息指出缺少angular模块（编译阶段就可以检测是否缺少依赖，优越性体现达成√），由于我们没有配置libs的路径所以webpack很明显读不到，写webpack配置文件也暂时没学过呢，回到官网就近找找解决方法，很快就能看到官方项目对loadsh的引用方式：
官网引入lodash.png

没有经过其他配置就能直接编译成功，说明了编译过程中会自动在node_modules找对应的库文件，同样地，我们也为项目添加一个angular模块：

yarn add angular --save

再用npx命令编译试试：
npx编译成功.png

果然成功了，warning先记下来不去深究，我们先就当前的工程http-server一下，看看运行结果：
简化工程打包后运行成功.png

哎哟不错哦，Webpack入门也没传说中那么难嘛。不过问题来了，现在文件少，输入一句命令就可以编译打包，但如果文件在开发中数量剧增，输入一长串命令编译的方式不止像土拨鼠一般愚蠢，同时也难以协助开发，那怎样的方式才能让打包变得便捷呢?

B. 添加配置文件

在Webpack4中，虽无需任何配置亦可编译打包，但是使用一个配置文件来代替大量手动输入的命令仍然是一个高效优雅的选择，故为工程在根目录添加新文件:webpack.config.js，编辑文件：

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

现在按照配置文件执行打包操作，只需在命令行输入：

webpack  --config webpack.config.js

稍等片刻即可完成打包操作，如果想要输入更少更简单，在保持配置文件名为"webpack.config.js"的情况下，可输入：

webpack    // 省略默认参数，执行效果与上条命令相同

我们可以在package.json添加一个npm脚本命令，可以像npx一样通过模块名引用本地安装的包，故在package.json中加入：

  "scripts": {
    "build": "webpack"
  }

试运行：

npm run build

使用npm脚本命令，可在"不安装webpack-cli的情况下"，达到相同的效果。

C. 打包其他模块

我们用pockmon模块作为操作样例吧，先将index.html中的导航栏和ngView引用恢复，并去除测试元素：

    <div>
      <h2>快速导航：</h2>
      <a href="/#!/pokemons">口袋妖怪</a>
      <a href="/#!/skills">技能</a>
      <a href="/#!/hagberrys">树果</a>
      <a href="/#!/props">道具</a>
      <a href="/#!/games">游戏</a>
    </div>
    <div ng-view></div>

由于打包中用到的import和export需要在js文件的最顶成，所以先去掉pokemon.js的use strict外围，然后在angular.module前面加上export default，在末端加上.name，即将该模块以其名称('pokemon-app.pokemon')暴露出去，代码如下：

import angular from 'angular';
import ngRoute from 'angular-route';

export default angular.module('pokemon-app.pokemon', ['ngRoute'])
    .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'
        })
    }])
    .controller('PMListController', PMListController)
    .controller('PMDetailController', PMDetailController)
    .name;        // 暴露模块名称

  
var pokemons = [
  { no:'001', name:'妙蛙种子', count: 1, weight: 6.9, property: '草/毒', type: '种子宝可梦', 
    character: { common: '茂盛', conceal: '叶绿素'},
    img: 'https://s1.52poke.wiki/wiki/thumb/2/21/001Bulbasaur.png/300px-001Bulbasaur.png'
  },
  { no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '种子宝可梦',  
    character: { common: '茂盛', conceal: '叶绿素'},
    img: 'https://s1.52poke.wiki/wiki/thumb/7/73/002Ivysaur.png/300px-002Ivysaur.png'
  },
  { no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '种子宝可梦',  
    character: { common: '茂盛', conceal: '叶绿素'},
    img: 'https://s1.52poke.wiki/wiki/thumb/a/ae/003Venusaur.png/300px-003Venusaur.png'
  },
  { no:'004', name:'小火龙', count: 1, weight: 8.5, property: '火', type: '蜥蜴宝可梦',  
    character: { common: '猛火', conceal: '太阳之力'},
    img: 'https://s1.52poke.wiki/wiki/thumb/7/73/004Charmander.png/300px-004Charmander.png'
  },
  { no:'025', name:'皮卡丘', count: 1, weight: 6, property: '电', type: '鼠宝可梦',  
    character: { common: '静电', conceal: '避雷针'},
    img: 'http://s1.52poke.wiki/wiki/thumb/0/0d/025Pikachu.png/260px-025Pikachu.png',
    forms: [
      { name: '偶像皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/e/e8/025Pikachu-Pop_Star.png/260px-025Pikachu-Pop_Star.png'},
      { name: '博士皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/2/2f/025Pikachu-PhD.png/260px-025Pikachu-PhD.png'},
      { name: '面罩摔角手皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/e/e7/025Pikachu-Libre.png/260px-025Pikachu-Libre.png'},
      { name: '贵妇皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/f/f0/025Pikachu-Belle.png/260px-025Pikachu-Belle.png'},
      { name: '重摇滚皮卡丘', src: 'http://s1.52poke.wiki/wiki/thumb/4/4f/025Pikachu-Rock_Star.png/260px-025Pikachu-Rock_Star.png'},
    ] }
];

PMListController.$inject = ['$scope'];
function PMListController ($scope) {
  $scope.pokemons = pokemons;
  $scope.remove = function (index) {
    $scope.pokemons.splice(index, 1);
  }
}

PMDetailController.$inject = ['$scope', '$routeParams'];
function PMDetailController ($scope, $routeParams) {
  console.log('$routeParams:', $routeParams);
  angular.forEach(pokemons, function (element) {
    if (element.no === $routeParams.no) {
      $scope.pokemon = element;
      console.log('the match pokemon:', $scope.pokemon);
    }
  });
}

顶部两行import引用其实不重要，但是再次import可以让依赖关系更加清晰，而且如果其他应用中需要用到它，我们只需要简单的复制粘贴就搞定了，不用担心依赖出错。参考自用ES6和webpack开发angular1.x项目（译）

再安装路由插件angular-route到node_modules中：

yarn add angular-route --save

最后在app.js中加入对angular-route & pokemon模块的引用，完成依赖加载并将重新打开路由配置中：

import route from 'angular-route';
import pokemon from './pokemon/pokemon';

  angular.module('pokemon-app', [
    route,
    pokemon
    // 'ngRoute',
    // 'pokemon-app.pokemon',           // 添加依赖
    // 'pokemon-app.skill',
    // 'pokemon-app.hagberry',
    // 'pokemon-app.prop',
    // 'pokemon-app.game'
  ])
  .config (['$routeProvider', function ($routeProvider) {
    $routeProvider
      .otherwise({  
        redirectTo: '/pokemons'     // 初始化直接跳转到pokemon模块
      });
  }])
  .controller('AppController', AppController);

至此pokemon模块的引入已经完成，其他模块的修改和引入也是依照这种方式直接加入app.js，无需在index.html中应用。app.js通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 bundle。

四、源码

口袋妖怪SPA系统源码地址：https://github.com/Nodreame/p...

本章基本功能提交：build(webpack): finish base webpack of project

本章文档补充说明提交：doc(Readme): add cmd for build && add dev note

五、总结

本章借助Webpack编译打包了工程，现在似乎也完成了所有模块的打包，但是现在的打包结果好像并不是那么实用，打包成一个压缩文件应该对调试会造成影响吧，还有每次修改代码难道都要手动输入npm run build吗这也太麻烦了，还有现在的dist文件夹部署到服务器应该是毫无作用的吧。。。还存在这么多问题，看来我们项目的工程化之路还要再走一程呢。关注项目推进动态，请看下章~

系列文章

从零开始搭建口袋妖怪管理系统(1)-从Angular1.x开始

从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页面跳转

从零开始搭建口袋妖怪管理系统(3)-实现一个简单的SPA管理系统

[从零开始搭建口袋妖怪管理系统(5)-借助webpack4.6工程化项目(下)]
(https://segmentfault.com/a/11...

To be continue...