无法在具有webpack的依赖项上加载angularjs$templateCache模板

很抱歉对其他人提出了这样一个类似的问题，但我似乎无法让它们中的任何一个起作用。 我知道，使用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'
    }

我有

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

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

<uib-typeahead></uib-typeahead>

我已验证模板是否在我的应用程序中的$templateCache内。但无论出于什么原因，$compile都无法完成它的任务。 那么，我怎样才能让$templateCache与webpack一起工作，这样我的外部依赖项才能工作呢？

---

提前谢谢。

多亏了约翰·雷利，我终于明白了

有一个名为

splitChunks

的插件，用于CommonChunksplugin。有一次我把它加入到我的配置中，一切都正常。我刚刚使用了这里提到的默认配置

注意：虽然它是一个插件，但它不在

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
        }
    }
  }
}

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
        }
    }
  }
}