我有一个由Webpack构建的Angular.js应用程序，具有以下布局：
├── app
│ ├── app.js
│ ├── components
│ │ ├── auth
│ │ │ ├── auth.module.js
│ │ │ ├── auth.service.js
│ │ │ └── user.service.js
│ │ ├── footer
│ │ │ └── footer.html
│ │ ├── header
│ │ │ └── header.html
│ │ ├── home
│ │ │ ├── home.html
│ │ │ └── home.module.js
│ │ ├── navigation
│ │ │ └── navigation.html
│ │ ├── right_sidebar
│ │ │ └── right_sidebar.html
│ │ └── util
│ │ ├── util.module.js
│ │ └── util.service.js
│ ├── index.html
│ └── shared
├── assets
│ └── images
│ └── logo.png
├── package.json
└── webpack.config.js
在webpack.config.js中，我已使用relativeTo选项配置了ngTemplate loader和htmlLoader。以下是webpack.config.js的有趣部分：
const webpackConfig = {
...
module: {
...
plugins: [
new HtmlWebpackPlugin({
inject: "body",
template: "app/index.html",
filename: "index.html"
})
],
loaders: [
...
{
test: /\.html$/,
exclude: `${path.join(__dirname, "/app/index.html")}`,
loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
}
]
}
}
我正在尝试require来自html文件的模板，期望ngTemplate-Loader尊重我的relativeTo设置，但它无效。
加载字符串为：templateUrl: require("/components/home/home.html")。
现在，我使用webpack运行此配置，并使用以下命令解决：
ERROR in ./app/components/home/home.module.js
Module not found: Error: Cannot resolve 'file' or 'directory' /components/home/home.html in /home/bob/Documents/Projects/bostongene/proto/apps/neoantigens/neoantigens/neoantigens/frontend/app/components/home
@ ./app/components/home/home.module.js 36:15-52
详细说明：
导入模块的完整代码如下：
home.module.js：
import angular from "angular"
class HomeController {
// @ngInject
constructor($scope, $location, $stateParams, $state) {
this.$scope = $scope;
this.$location = $location;
this.$state = $state;
this.$stateParams = $stateParams;
}
}
// @ngInject
function routes($stateProvider) {
$stateProvider.state("home", {
url: "/home",
templateUrl: require("/components/home/home.html"),
controller: "HomeController"
});
}
export default angular.module("home", [])
.controller('HomeController', HomeController)
.config(routes);
这是完整的错误日志：
Version: webpack 1.12.12
Time: 13977ms
Asset Size Chunks Chunk Names
header-f3d4715.jpg 186 kB
glyphicons-halflings-regular-f4769f9.eot 20.1 kB
glyphicons-halflings-regular-448c34a.woff2 18 kB
glyphicons-halflings-regular-fa27723.woff 23.4 kB
glyphicons-halflings-regular-e18bbf6.ttf 45.4 kB
glyphicons-halflings-regular-8988968.svg 109 kB
app.afa8b5d.js 2.48 MB 0 app
app.afa8b5d.css 231 kB 0 app
chunk {0} app.afa8b5d.js, app.afa8b5d.css (app) 2.39 MB [rendered]
[0] multi app 28 bytes {0} [built]
[1] ./app/app.js 1.36 kB {0} [built]
[2] ./bower_components/angular/angular.js 1.09 MB {0} [built]
[3] ./bower_components/angular-animate/angular-animate.js 142 kB {0} [built]
[4] ./bower_components/angular-messages/angular-messages.js 25.7 kB {0} [built]
[5] ./bower_components/angular-resource/angular-resource.js 28.1 kB {0} [built]
[6] ./bower_components/angular-sanitize/angular-sanitize.js 24.5 kB {0} [built]
[7] ./bower_components/angular-ui-router/release/angular-ui-router.js 169 kB {0} [built]
[8] ./bower_components/bootstrap/dist/css/bootstrap.css 41 bytes {0} [built]
[17] ./bower_components/angular-bootstrap/index.js 65 bytes {0} [built]
[18] ./bower_components/angular-bootstrap/ui-bootstrap-tpls.js 240 kB {0} [built]
[19] ./app/components/home/home.module.js 1.18 kB {0} [built] [1 error]
[20] ./bower_components/jquery/dist/jquery.js 259 kB {0} [built]
[21] ./~/lodash/index.js 411 kB {0} [built]
[22] (webpack)/buildin/module.js 251 bytes {0} [built]
[23] ./~/expose-loader?angular!./bower_components/angular/angular.js 329 bytes {0} [built]
[24] ./assets/styles/style.scss 41 bytes {0} [built]
ERROR in ./app/components/home/home.module.js
Module not found: Error: Cannot resolve 'file' or 'directory' /components/home/home.html in /home/bob/Documents/Projects/bostongene/proto/apps/neoantigens/neoantigens/neoantigens/frontend/app/components/home
@ ./app/components/home/home.module.js 36:15-52
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 444 kB 0
chunk {0} index.html 412 kB [rendered]
[0] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 568 bytes {0} [built]
[1] ./~/lodash/index.js 411 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
header-f3d4715.jpg 186 kB
chunk {0} extract-text-webpack-plugin-output-filename 94.2 kB [rendered]
[0] ./~/css-loader?name=[name]-[hash:7].[ext]!./~/postcss-loader!./~/sass-loader?includePaths[]=/home/bob/Documents/Projects/bostongene/proto/apps/neoantigens/neoantigens/neoantigens/frontend/app!./assets/styles/style.scss 75.5 kB {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[2] ./assets/styles/img/green.png 6.79 kB {0} [built]
[3] ./assets/styles/img/green@2x.png 10.3 kB {0} [built]
[4] ./assets/images/landing/header.jpg 64 bytes {0} [built]
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
glyphicons-halflings-regular-f4769f9.eot 20.1 kB
glyphicons-halflings-regular-448c34a.woff2 18 kB
glyphicons-halflings-regular-fa27723.woff 23.4 kB
glyphicons-halflings-regular-e18bbf6.ttf 45.4 kB
glyphicons-halflings-regular-8988968.svg 109 kB
chunk {0} extract-text-webpack-plugin-output-filename 152 kB [rendered]
[0] ./~/css-loader?name=[name]-[hash:7].[ext]!./~/postcss-loader!./~/sass-loader?includePaths[]=/home/bob/Documents/Projects/bostongene/proto/apps/neoantigens/neoantigens/neoantigens/frontend/app!./bower_components/bootstrap/dist/css/bootstrap.css 150 kB {0} [built]
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[2] ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 86 bytes {0} [built]
[3] ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 88 bytes {0} [built]
[4] ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 87 bytes {0} [built]
[5] ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 86 bytes {0} [built]
[6] ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 86 bytes {0} [built]
[16:45:44] Finished 'webpack' after 14 s
[16:45:44] Starting 'build'...
[16:45:44] Finished 'build' after 8.59 μs
完整webpack.config.js：
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const environmentsFile = path.join(__dirname, "/environments.json")
const nodeModulesPath = path.join(__dirname, "/node_modules");
const bowerComponentsPath = path.join(__dirname, "/bower_components")
const webpackConfig = {
entry: {
app: ["app.js"]
},
output: {
path: path.join(__dirname, "..", "static"),
publicPath: "/",
filename: "app.[hash:7].js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
), // bower; see: https://github.com/webpack/docs/wiki/usage-with-bower
new ExtractTextPlugin("app.[hash:7].css"),
new HtmlWebpackPlugin({
inject: "body",
template: "app/index.html",
filename: "index.html"
})
],
resolve: {
root: [path.join(__dirname, "/app"), nodeModulesPath, bowerComponentsPath]
},
noParse: [nodeModulesPath, bowerComponentsPath],
module: {
preLoaders: [
{
test: /\.js$/,
exclude: [nodeModulesPath, bowerComponentsPath],
loaders: [`env-replace?prefix=@@&file=${environmentsFile}`]
}
],
loaders: [
{
test: /[\/]angular\.js$/,
exclude: [nodeModulesPath],
loader: "exports?angular"
},
{
test: /\.js$/,
exclude: [nodeModulesPath, bowerComponentsPath],
loaders: ["ng-annotate", "babel?presets[]=es2015&cacheDirectory=true"]
},
{
test: /\.s?css$/,
loader: ExtractTextPlugin.extract("style", "css?name=[name]-[hash:7].[ext]!postcss-loader!" + `sass?includePaths[]=${path.join(__dirname, "/app")}`)
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.(ttf|eot|svg|otf)$/,
loader: "file?name=[name]-[hash:7].[ext]"
},
{
test: /\.(png)$/,
loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/png"
},
{
test: /\.(gif)$/,
loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/gif"
},
{
test: /\.(jpg)$/,
loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/jpeg"
},
{
test: /\.woff(2)?$/,
loader: "url?name=[name]-[hash:7].[ext]&limit=8192&minetype=application/font-woff"
},
{
test: /\.html$/,
exclude: `${path.join(__dirname, "/app/index.html")}`,
loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"] //html?attrs[]=div:ng-include
}
]
},
postcss: function() {
return [require('autoprefixer')];
},
devServer: {
contentBase: "./app",
noInfo: false,
hot: true,
inline: true,
historyApiFallback: true
}
};
module.exports = webpackConfig;