有一个大的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);
如果需要，我可以提供整个示例项目...
最佳答案
这可能不是您正在寻找的答案，但是在过去，我使用html-loader来要求我的组件模板URL，并且效果很好：
https://www.npmjs.com/package/html-loader
它只是在内联脚本中内联模板。
关于angularjs - 从gulp和bower迁移AngularJS 1.x项目到Webpack 3时如何构建统一的$ templateCache，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46819181/