无法使用 webpack 在依赖项上加载 angularjs $templateCache 模板

Question

很抱歉向其他人提出类似的问题，但我似乎无法让他们中的任何一个工作。 我知道在使用 webpack 时，在您的 Angular 应用程序中包含模板的标准方法是通过 require。即

template: require('./sometemplte.html')

我在所有应用程序代码中都这样做了，而且效果很好。 但是我有四个使用 templateUrl 的依赖库，让我们专注于 angular-ui-boostrap。

我的 webpack.conf.js

entry: {
  vendor: "./src/vendor.ts",
  app: "./src/ClientApp/app.ts"
},
output: {
  filename: "[name].js",
  path: __dirname + "/wwwroot"
},
module: {
    rules: [
    { test: /\.ts$/,
      loader: "ts-loader"
    }, {
      test: /\.html$/,
      loader: 'raw-loader'
    }

在 vendor.ts 我有

require('angular');
require('angular-ui-bootstrap');

在我的应用程序中，我只是使用指令

<uib-typeahead></uib-typeahead>

我的 node_modules 中的代码不是我可以修改的代码。但目前我收到以下错误

angular.js:14700 Error: [$compile:tpload] Failed to load template: uib/template/typeahead/typeahead-popup.html
http://errors.angularjs.org/1.6.6/$compile/tpload?p0=ui-grid%2Fui-grid&p1=undefined&p2=undefined

我验证了模板在我的应用程序的 $templateCache 中。但无论出于何种原因，它都不能用于 $compile 做它的事情。 那么我怎样才能让 $templateCache 与 webpack 一起工作，这样我的外部依赖项才能工作呢？ 提前致谢。

Answer 1

感谢 John Reilly，我终于弄明白了。

有一个名为splitChunks 的插件，它曾经是CommonsChunksPlugin。一旦我将它包含到我的配置中，一切就可以正常工作了。我只是使用了这里提到的默认配置

https://webpack.js.org/plugins/split-chunks-plugin/

注意：虽然它是一个插件，但它不会进入plugins 数组。它进入优化对象。

entry: {...},
output: {...},
optimization: {
  splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
  }
}