为 Webpack 4 加载 AngularJS 模板的正确方法？

Question

到目前为止，我已经能够将所有 controllers/directives/services 捆绑到 1 个脚本中，并且还将所有供应商脚本捆绑到另一个脚本文件中。现在我无法弄清楚加载 AngularJS 模板文件的正确方法是什么。我们目前正在使用 Grunt，只是将确切的文件夹结构复制到 dist 文件夹，但显然这在 Webpack 中不起作用。这是我们项目结构的示例（来自 John Papa 风格指南）

我在 dist 文件夹中的项目当前呈现如下：

有人有意见吗？

Answer 1

AngularJS 模板是 html 文件，因此您需要添加一些加载器来处理它们。

你有多种选择，将那些 html 文件打包到 js 包中，使用 html-loader，这种方法的优点是你的应用程序不会 ajax调用模板，缺点，你的js包大小会变大。这将允许您在控制器中 "require" 您的 html 模板。
使用 copy-webpack-plugin 复制这些原始文件，这样它将以与 Grunt 相同的方式工作（提供 templateUrl 复制文件的路径）。
In-order 具体到 lazy-loaded 文件你可以附加 .lazy.html 后缀。然后，在 .lazy.html 文件上启用 file-loader 并将其分配给 templateUrl，并且常规一次使用 template: require('template.html').

作为最佳实践，我会 "require" 关键模板，这样它们将在 js 包中，并且延迟加载（通过 templateUrl）non-critical 个。

这是 webpack.config.js 文件的示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.lazy\.html$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
      {
        test: /\.html$/,
        exclude: /\.lazy\.html$/
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },
};

// critical.component.js
angular.
  module('myApp').
  component('greetUser', {
    template: require('critical.html'),
    controller: function GreetUserController() {
      this.user = 'world';
    }
  });


// none-critical.component.js

angular.
  module('myApp').
  component('greetUser', {
    templateUrl: require('non-critical.lazy.html'),
    controller: function GreetUserController() {
      this.user = 'world';
    }
  });

为 Webpack 4 加载 AngularJS 模板的正确方法？

Correct way to load AngularJS templates for Webpack 4?

angularjs

gruntjs

webpack-4