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

Question

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

希望迁移到使用 yarn 和 webpack，我们不希望仅仅为了实现 webpack 而修改我们的项目文件。我们的每个 AngularJS 组件 JS 文件都包装在一个 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...
});

我已经设法弄清楚如何使用 webpack 解决大多数其他构建过程，但这给我带来了问题。

我查看了ngtemplate-loader 包，但认为这不能满足我们的需求，原因如下：

• 需要我们更新所有现有的 HTML 模板以使用 'require("./template.html")'
• 这会为每个 HTML 模板创建一个单独的 webpack 模块，这似乎非常低效。
• 可能最重要的是，我无法让它工作。

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

最终，我希望能够将编译后的 $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-loader 来允许我要求我的组件模板 URL，并且效果非常好：

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

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