如何用Webpack 4导出/导入AngularJS控制器、指令等组件

嘿，刚好处理过类似的AngularJS迁移拆分问题，给你分享一套适配Webpack 4的落地方案，完美解决组件导出导入的问题：

AngularJS本身基于全局模块系统，结合Webpack的ES模块机制，我们不需要再依赖自执行函数（IIFE）隔离作用域，而是通过拆分模块定义+组件单独文件+聚合导入的方式来组织代码。

第一步：拆分根模块与子模块定义 #

先把原来大文件里的模块声明单独拆出来，明确模块依赖关系：

1. 根模块文件（src/app.module.js） #

// 定义根应用模块，声明依赖的子模块
angular.module('AppName', [
  'app.services',
  'app.controllers',
  'app.directives',
  // 其他原有的依赖模块...
]);

2. 子模块文件（以services为例，src/services/services.module.js） #

// 定义子模块，后续所有服务/工厂都注册到这个模块下
angular.module('app.services', []);

同理可以创建src/controllers/controllers.module.js、src/directives/directives.module.js等子模块文件。

第二步：单独拆分每个组件，规范导出与注册 #

每个控制器、指令、工厂都单独写一个文件，推荐用显式依赖注入的方式（避免Webpack压缩代码时破坏依赖），有两种写法可选：

写法一：直接在组件文件中注册到对应模块（简单直接） #

比如一个工厂组件（src/services/api.factory.js）：

// 直接获取已定义的子模块，注册工厂
angular.module('app.services')
  .factory('ApiService', ['$http', function($http) {
    return {
      fetchUserData: function() {
        return $http.get('/api/user');
      }
    };
  }]);

再比如一个控制器组件（src/controllers/user.controller.js）：

angular.module('app.controllers')
  .controller('UserController', ['$scope', 'ApiService', function($scope, ApiService) {
    $scope.user = {};
    
    ApiService.fetchUserData().then(res => {
      $scope.user = res.data;
    });
  }]);

写法二：导出组件配置，在模块文件中注册（更符合ES模块风格，便于单元测试） #

比如指令组件（src/directives/user-profile.directive.js）：

// 导出指令的配置对象，显式声明依赖
export const UserProfileDirective = function() {
  return {
    restrict: 'E',
    templateUrl: './templates/user-profile.html',
    scope: {
      user: '='
    },
    link: function(scope) {
      // 指令逻辑
    }
  };
};

然后在子模块文件中导入并注册：

// src/directives/directives.module.js
import { UserProfileDirective } from './user-profile.directive';

angular.module('app.directives', [])
  .directive('userProfile', UserProfileDirective);

第三步：聚合组件，统一导入到入口文件 #

为了避免在main.js里写大量零散的import，我们可以给每个子模块创建一个index.js来聚合所有组件：

子模块聚合文件（以services为例，src/services/index.js） #

// 先导入子模块定义
import './services.module';
// 导入所有服务/工厂组件
import './api.factory';
import './auth.factory';
// 其他服务文件...

同理创建src/controllers/index.js、src/directives/index.js等聚合文件。

根聚合文件（src/index.js） #

// 导入根模块
import './app.module';
// 导入所有子模块的聚合文件
import './services';
import './controllers';
import './directives';
// 其他模块...

最终入口文件（src/main.js） #

// 先导入AngularJS（如果是通过npm安装的话）
import 'angular';
// 导入所有聚合后的模块与组件
import './index';

第四步：Webpack配置注意点 #

1. 确保entry指向src/main.js
2. 如果需要处理HTML模板，可以添加html-loader规则：

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      // 处理HTML模板
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      // 如果用ES6语法，添加babel-loader支持
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};

这样拆分后，每个组件独立维护，导入逻辑清晰，完全适配Webpack的模块机制，同时保留AngularJS原有的模块化特性~

内容的提问来源于stack exchange，提问作者Edgar Quintero