Правильный способ загрузки шаблонов AngularJS для Webpack 4?

Шаблоны AngularJS — это html файлы, поэтому вам нужно добавить загрузчик для их обработки.

1. У вас есть несколько вариантов, объедините эти html файлы в пакет js, используя html-загрузчик, плюсы этого подхода в том, что ваше приложение не будет вызывать ajax для шаблона, минусы, размер вашего пакета js станет большим. Это позволит вам «требовать» ваш HTML-шаблон внутри ваших контроллеров.

2. скопируйте эти необработанные файлы, используя копировать-webpack-плагин, таким образом, он будет работать так же, как и с 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';
    }
  });