Comment construire $ templateCache unifié lors de la migration du projet AngularJS 1.x de gulp & bower vers webpack 3

Question

Avoir un grand projet AngularJS 1.6 (~ 120 fichiers JS), qui est actuellement construit par gulp/bower. Nous souhaitons passer à l'utilisation du fil & webpack, et nous préférerions ne pas avoir à modifier nos fichiers de projet juste pour implémenter webpack. Chacun de nos fichiers JS composant AngularJS est enveloppé dans un IIFE, ils sont donc déjà hors de portée globale. Une de nos étapes de gulp utilise le module gulp-angular-templatecache, qui recueille tous nos fichiers HTML et les compacte soigneusement dans un seul module de chargement $ 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... 
}); 

J'ai réussi à comprendre comment résoudre la plupart de nos autres processus de construction utilisant webpack, mais celui-ci me donne un problème.

J'ai regardé le paquet ngtemplate-loader, mais ne pense pas que cela fonctionnerait pour nos besoins en raison des éléments suivants:

• nous obligerait à mettre à jour tous nos modèles HTML existants à utiliser « require (» ./template.html ") '
• Cela créerait un module webpack séparé pour chaque modèle HTML, ce qui semble très inefficace.
• Probablement le plus important, je n'ai pas réussi à le faire fonctionner.

La configuration de webpack actuelle que j'ai configurée est basée sur une démo simple, et sépare les fichiers de projet des fichiers du fournisseur. Nos fichiers de projet sont regroupés dans un fichier 'app. [Hashcode] .js' dans le dossier/dist. En fin de compte, j'aimerais pouvoir injecter le module $ templateCache compilé, dans un point spécifique de notre fichier final 'app. [Hashcode] .js'. Cependant, en ce moment je serais satisfait avec le fichier de définition $ templateCache en cours de création dans un fichier bundle séparé.

Existe-t-il un plugin webpack ou un chargeur, ou une combinaison de plugin (s)/loader (s), que je pourrais utiliser pour accomplir cette étape de construction? Est-ce encore possible avec webpack?

C'est la structure du répertoire de base pour le projet de démonstration:

/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 

Ceci est le travail en cours webpack.config.js fichier:

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

C'est le webpack fichier 'entrée' 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); 

Si nécessaire, je peux fournir l'échantillon entier projet ...

Answer 1

Cela peut ou ne peut pas être la réponse que vous cherchez, mais dans le passé, je l'ai utilisé html chargeur pour me permettre d'exiger les URL de mon modèle de composant, et cela a fonctionné avec brio:

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

Il ne fait qu'insérer le modèle dans votre script groupé.