如何在將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

它只是在您的捆綁腳本中內聯模板。