从gulp&；迁移AngularJS 1.x项目时如何构建统一的$templateCache；bower至网页包3

有一个大型AngularJS 1.6项目（~120个JS文件），目前通过gulp/bower构建

希望迁移到使用Thread&webpack，我们不希望为了实现webpack而修改我们的项目文件。我们的每个AngularJS组件JS文件都包装在一个IIFE中，因此它们已经超出了全局范围

我们的一个gulp步骤使用该模块，该模块收集所有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...
});

这是当前正在工作的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);

---

如果需要，我可以提供整个示例项目…

这可能是您想要的答案，也可能不是您想要的答案，但在过去，我使用html loader允许我需要我的组件模板URL，它工作得非常出色：

---

它只是将模板内联到捆绑脚本中。

我们的目标是将模板与其他JS一起完全加载到模板缓存中，以便它们立即可用。如果我错了，请纠正我的错误（对webpack来说仍然很陌生），但是这个解决方案是否意味着模板在运行时是“必需的”（或注入的）？你能给我指一下这个解决方案的功能性示例吗？我想尝试一下，看看它是否能完全满足我们的需求。嗨，不-它们在构建时是必需的，因此可以立即在客户端中使用，也就是说，HTML文件不需要额外的HTTP请求。然而，它并没有预先填充模板缓存，但看起来这个网页加载器扩展了html加载器来实现这一点：虽然我没有亲自使用它，因为我发现html加载器对我们来说已经足够好了。这篇文章几乎描述了我所做的，只是我使用了html加载器而不是原始加载器：嘿，再次感谢您的回复。是的，我刚才已经看过那篇文章了。不幸的是，它仍然需要更新每个模板，以便在模板文件名周围使用“require（）”包装。谢谢你的帮助，我会继续四处看看，也许会开始写我自己的插件。不用担心，祝你好运！如果一个已经存在，也不会感到惊讶；缺少的只是templateUrl转换，将路径包装在require语句中。

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);