Wepback导入html模板未加载

Question

我有一个使用Webpack用AngularJS制作的单片项目，但我收到一个错误，说：Unexpected token < main.html.当我的一个控制器中有这行代码时，就会发生这个错误：

import templateUrl from './main.html';

根据我的理解，在我看来，Webpack没有正确地绑定我的HTML模板。<符号来自main.html模板，已成功找到但未解析。然后我考虑使用html-loader并以这种方式使用它：

import templateUrl from 'html-loader!./main.html';

令我惊讶的是，这并不能解决问题。

我使用的是Webpack版本"webpack": "^3.4.1",，这是我的配置：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ContextReplacementPlugin = 
require('webpack/lib/ContextReplacementPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProd = nodeEnv === 'production';
const styles = [
'css-loader?importLoaders=1',
'postcss-loader',
'sass-loader'
];
module.exports = {
entry: {
'root-application': 'src/root-application/root-application.js',
},
output: {
publicPath: '/dist/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.scss$/,
use: !isProd
? [
'style-loader',
...styles
]
: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: styles
}),
exclude: /(node_modules)/
},
{
test: /.(png|woff|woff2|eot|ttf|svg)$/,
use: ['url-loader?limit=100000']
},
{
test: /.html$/,
use: [
'ngtemplate-loader',
'html-loader'
],
exclude: /(index)/
},
{
test: /.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: /.tsx?$/,
loader: 'ts-loader',
},
],
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common-dependencies',
}),
new ContextReplacementPlugin(
/(.+)?angular(\|/)core(.+)?/,
path.resolve(__dirname, '../src')
)
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};

我已经检查了关于Unexpected token <的其他SO主题，我确信在我的网络选项卡中没有404-未找到错误。

Answer 1

这是从根本上从不同的角度解决问题，不使用templateUrl属性来加载指令的模板，但我使用了这个angularjs&webpack配置效果显著；它还通过内联模板来保存HTTP请求。

// webpack.config.js
module.exports = {
// ...
module: {
rules: [
// Load raw HTML files for inlining our templates
{ test: /.(html)$/, loader: "raw-loader" },
// ... other rules, config, etc.
]
}
}

然后，在指令文件中：

import templateString from './wherever.template.html'
function directiveFunc() {
return {
// template, rather than templateUrl   
template: templateString,
// ...
}
}
export default directiveFunc

使用安装raw-loader加载程序

$ npm install raw-loader --save-dev

Answer 2

您可能希望使用angular2模板加载程序，而不是通用的模板加载程序。