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

Question

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

我的dist文件夹内的项目目前呈现如下：

有人有意见吗？

Answer 1

AngularJS 模板是html 文件，所以你需要添加一些加载器来处理它们。

1234563尺寸会变大。 这将允许您在控制器中“要求”您的 html 模板。

1. 使用 copy-webpack-plugin 复制这些原始文件，这样它的工作方式与使用 Grunt 的方式相同（为复制的文件提供 templateUrl 路径）。

2. 为了具体说明延迟加载的文件，您可以附加.lazy.html 后缀。 然后，在.lazy.html 文件上启用file-loader 并将其分配给templateUrl，并定期与template: require('template.html') 一起使用。

作为最佳实践，我会“要求”关键模板，以便它们位于 js 包中，并延迟加载（通过 templateUrl）非关键模板。

这是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';
    }
  });