Wepback导入html模板未加载
Wepback导入html模板未加载
提问于 2018-07-18 18:38:21
我有一个用AngularJS做的巨石项目，使用的是Webpack，但我收到一个错误消息：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 <的其他主题，我确信在我的网络选项卡中没有404 - Not found错误。
回答 2
Stack Overflow用户
发布于 2018-07-20 22:49:40
这从根本上是从一个不同的角度解决问题，不使用templateUrl属性来加载指令的模板，但我已经使用了这种angularjs & taking配置，效果很好；它还通过内联模板来节省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-devStack Overflow用户
发布于 2018-07-20 22:43:45
您可能希望使用angular2-template-loader，而不是通用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51399886
复制相关文章
相似问题
腾讯云开发者
