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

时间 2019-11-10

标签开始搭建口袋妖怪管理系统借助 webpack4.6 webpack 工程项目繁體版

原文原文链接

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

1、目标

上一章咱们借助ngRoute，完成了口袋妖怪SPA系统的多模块导航开发，可是如今引用的东西愈来愈多，项目文件目录开始变得混乱不堪：
css

如今先对当前项目文件列表进行整理，将五大模块移入src文件夹中：
html

而后修改index.html中的js引用路径：node

<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，使其指向文件位置：webpack

.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'
      })
  }])

简单修改一下以后项目瞬间整洁了许多，可是若是之后工程变得更大，将会有愈来愈多的第三方库、环境工具包、样式库及图片库加入项目，这样项目整理维护难度确定会随着项目的扩大而不断加大，因此咱们须要一个编译打包工具来协助咱们对项目文件进行管理打包，以方便开发的推动。git

2、分析

参考网上文章对grunt、gulp、webpack三种打包工具的分析比对，grunt的配置较为复杂且效率不高因此先舍弃，gulp的配置简单和流式工做比较吸引，可是显然webpack的模块化特性与AngularJS的机制具备更好的相性，因而本项目选中Webpack做为项目的打包工具。github

3、开发

3.1 安装

参考webpack指南，安装webpack最新版本(当前版本4.6.0)：web

yarn add webpack --save-dev

3.2 起步

A. 简化工程，完成初始打包

如今准备开始使用Webpack4.6.0打包工程，可是因为是初学Webpack，因此先将工程简化为最简版本，即先不加入多模块，只留下index.html和src/app.js，index.html代码以下：npm

<!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中咱们作了两个处理：json

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

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

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而后发现竟然还没动静了

因而我中断安装而后本身输入安装webpack-cli的命令：

yarn add webpack-cli --save-dev

果真安装成功了，立刻再次运行npx的编译指令~咦又报错了,直接拉到最后看Error信息：

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

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

yarn add angular --save

再用npx命令编译试试：

果真成功了，warning先记下来不去深究，咱们先就当前的工程http-server一下，看看运行结果：

哎哟不错哦，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。

4、源码

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

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

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

5、总结

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

系列文章

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

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

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

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

To be continue...