Как создать унифицированную $templateCache при переносе проекта AngularJS 1.x с gulp & bower на webpack 3

Question

Имейте большой проект AngularJS 1.6 (~120 файлов JS), который в настоящее время построен через gulp/bower.

Мы хотели бы перейти на использование пряжи и веб-пакета, и мы бы предпочли не изменять файлы нашего проекта только для реализации веб-пакета. Каждый из наших JS-файлов компонента AngularJS обернут в IIFE, поэтому они уже находятся вне глобальной области видимости.

Один из наших шагов gulp использует модуль gulp -angular-templatecache, который собирает все наши HTML-файлы и аккуратно уплотняет их в один модуль загрузчика $ tmplateCache.

angular.module("ourApp").run(["$templateCache", function ($templateCache) {
  $templateCache.put("/app/components/ourComponent1.html", "<div id=\"component1-html\"> ... </div>\r\n");
  $templateCache.put("/app/components/ourComponent2.html", "<div id=\"component2-html\"> ... </div>\r\n");
  // etc...
});

Мне удалось выяснить, как решить большинство других наших процессов сборки с помощью веб-пакета, но этот вызывает у меня проблему.

Я посмотрел на пакет ngtemplate-loader, но не думаю, что это будет работать для наших нужд из-за следующего:

• Потребует от нас обновить все наши существующие HTML-шаблоны для использования 'require("./template.html")'
• Это создаст отдельный модуль веб-пакета для каждого шаблона HTML, что кажется очень неэффективным.
• Наверное, самое главное, я не смог заставить его работать.

Текущая конфигурация веб-пакета, которую я настроил, основана на простом демонстрационном примере и разделяет файлы проекта из файлов поставщика. Файлы нашего проекта упакованы в файл "app.[Hashcode].js" в папку / dist.

В конечном счете, я хотел бы иметь возможность внедрить скомпилированный модуль $templateCache в конкретную точку нашего окончательного файла пакета app.[Hashcode].js. Однако сейчас я был бы удовлетворен тем, что файл определения $templateCache был создан в отдельном файле комплекта.

Существует ли существующий плагин веб-пакета, или загрузчик, или комбинация плагинов (-ей)/ загрузчика (-ов), которые я мог бы использовать для выполнения этого шага сборки? Это возможно даже с веб-пакетом?

Это базовая структура каталогов для демонстрационного проекта:

/dashboard
   /app
      /assets
         /global
            global.less
         app.less
      /components
         /controllers
            dashboard.controller.js
         /directives
            yep-nope.directive.js
         /messenger
            messenger.directive.js
            messenger.html
         /services
            github-status.service.js
         dashbboard.config.js
         dashboard.module.js
      app.js
      /dist
         app.4f12bb49f144e559bd9b.js
         assets.css
         index.html
         vendor.b0a30c79aa77e0126a5c.js
   index.html
   package.json
   webpack.config.js

Это текущий рабочий файл webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
   context: __dirname,  
   entry: {
      app: path.resolve(__dirname, 'app/app.js'),
      vendor: ['angular','angular-sanitize']
   },
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[chunkhash].js'
   },
   module: {
      rules: [
      {
         test: /\.less$/,
         use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ['css-loader', 'less-loader']
         })
      },
      {
         test: /\.js$/,
         loader: 'ng-annotate-loader'
      },
      {
         test: /\.html$/,
         exclude: path.resolve(__dirname, 'app/index.html'),
         use: [
            { loader: 'html-loader', options: { minimize: false } }
         ]
      }]
   },
   plugins: [
      new CleanWebpackPlugin(['dist','assets/**/*.css']),
      new HtmlWebpackPlugin({   
         title: 'GitUp',
         template: 'index.html',
         inject: 'body'
      }),
      new webpack.optimize.CommonsChunkPlugin({
         name:"vendor", filename:"[name].[chunkhash].js"
      }),
      new ExtractTextPlugin('assets.css')
   ]
};  

Это файл app/app.js "записи" в веб-пакете:

require('./assets/app.less');

require('../node_modules/angular/angular.js');
require('../node_modules/angular-sanitize/angular-sanitize.js');

require('./components/dashboard.module.js');    // Define module
require('./components/dashboard.config.js');    // Setup config

// Load in all components files, except for files already loaded above
var reqCtx = require.context('./components', true, /^(?!.*(?:dashboard\.config|dashboard\.module)).*\.js$/);
reqCtx.keys().forEach(reqCtx);

При необходимости я могу предоставить весь пример проекта...

Answer 1

Это может быть, а может и не быть ответом, который вы ищете, но в прошлом я использовал html-загрузчик, чтобы разрешить мне запрашивать URL-адреса шаблонов компонентов, и он работал блестяще:

https://www.npmjs.com/package/html-loader

Он просто вставляет шаблон в ваш скрипт.