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

Question

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

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

有人有任何意见吗？

Answer 1

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

1. 您有多种选择，html使用html-loader将这些文件捆绑到 js 包中，这种方法的优点是您的应用程序不会对模板进行 ajax 调用，缺点是您的 js 包大小会变大。这将允许您在控制器中“要求”您的 html 模板。

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

3. 为了特定于延迟加载的文件，您可以附加.lazy.html后缀。然后，在文件上启用文件加载器并将其.lazy.html分配给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';
    }
  });