AngularJS 的 Webpack 插件和/或策略答案

【问题标题】：Webpack plugins and/or strategies for AngularJSAngularJS 的 Webpack 插件和/或策略
【发布时间】：2018-08-07 22:00:55
【问题描述】：

我目前正在使用 Gulp 构建一个 AngularJS 1.7 项目，我正在考虑将其切换到 Webpack。经过一番初步探索后，我发现很难找到并加载所有源文件，因为它是以 CommonJS 和 ES6 模块之前的风格编写的。我的直觉是它是 Angular 的一种常见（但旧）风格，但我是新手，所以我不确定。

问题：是否有用于构建 Angular 1 项目的 Webpack 插件或工具或策略？我希望有一个足够智能的插件可以引入所有模板文件、控制器、指令、服务等，而无需进行大量配置。

具体来说，我正在寻找“使用这正是您需要的工具”，而不是“遵循这 20 个步骤”。并不是我懒惰，只是我有信心我可以弄清楚所有必需的步骤，但在我走这条路之前，我想确保我不会错过一些为我完成所有工作的插件。而且，我不想浪费其他人的时间来编写步骤。

参考信息

文件结构

- src
  - components
    - hometile
      -- hometile.css
      -- hometile.drct.js
      -- hometile.tpl.html
  - services
    - capabilities.fct.js

注意模板与组件控制器放在同一目录中的方式。

这是路由文件中的 sn-p，显示了如何引用模板：

app.routes.js

$routeProvider.
    when('/home', {
        templateUrl: 'sections/home/home.tpl.html',
        controller: 'HomeController as home',
        resolve: {
            commonData: function(MyService) {
                return MyService.getCommonData();
            }
        }
    })

注意 templateUrl 的使用，它是一个字符串路径。实际文件是一个模板，据我所知，现有的 Gulp 构建器使用 glob 查找所有 .tpl 模板，然后将它们发送到 nghtml2js 以组合成一个 .js

我希望已经为 Webpack 编写了类似的东西，它采用标准 Angular 1 项目结构并构建所有必需的输出。

【问题讨论】：

标签： angularjs webpack

【解决方案1】：

我不确定这是否真的是完整的答案，但 import-glob npm 包有很大的不同。我能够创建一个 import.js，然后导入我需要的所有内容。

import.js

import './services/**/*.js';
import './directives/**/*.js';
import './controllers/**/*.js';

关于导入模板，我也对其进行了一些更新：

import template from './sections/home/home.tpl.html';

$routeProvider.
when('/home', {
    templateUrl: template,
    controller: 'HomeController as home',
    resolve: {
        commonData: function(MyService) {
            return MyService.getCommonData();
        }
    }
})

通过这种方式导入所有内容，Webpack 能够找到所有源文件。

【讨论】：