如何在将AngularJS 1.x项目从gulp＆bower移植到webpack时构建统一的$ templateCache 3

Question

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

寻找迁移到使用纱线& webpack，我们不希望修改我们的项目文件只是为了实现webpack。我们的每个AngularJS组件JS文件都包含在一个IIFE中，因此它们已经不在全局范围内。

我们的一个吞噬步骤使用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... 
}); 

我设法弄清楚如何解决我们的大多数使用的WebPack其他的构建过程，但是这一次是给我的一个问题。

我已经看了看ngtemplate-loader包，但不认为这会为我们因为工作需要执行以下操作：

• 将要求我们更新了我们所有的现有HTML模板使用“要求（” ./template.html“）'
• 这将为每个HTML模板创建一个单独的webpack模块，这看起来效率很低。
• 可能最重要的是，我还没有能够得到它的工作。

我设置的当前webpack配置基于一个简单演示，并将项目文件从供应商文件中分离出来。我们的项目文件被捆绑到一个'app。[hashcode] .js'文件到/ dist文件夹中。

最终，我希望能够将已编译的$ templateCache模块注入到我们最终的'app. [hashcode] .js'包文件中的特定点。但是，现在我会满意于将$ templateCache定义文件创建为一个单独的包文件。

是否有现有的webpack插件或加载程序或插件/加载程序的组合，我可以使用它来完成此构建步骤？这甚至有可能与webpack？

这是示范项目的基本目录结构：

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

这是的WebPack '进入' 文件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的装载机，让我要求我的组件模板的网址，它工作出色：

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

它只是在您的捆绑脚本中内联模板。