Webpack导入html模板未加载答案

【问题标题】：Wepback import html template not loadingWebpack导入html模板未加载
【发布时间】：2018-12-26 05:57:06
【问题描述】：

我有一个使用 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 - Not found 错误。

【问题讨论】：

我们有这样的代码： import controller from './ctrl.ctrl';组件 = { 绑定：{ }，控制器：控制器，模板：require('./template.html') }; [所以需要 html 而不是 import]
@PetrAveryanov 为什么这很重要？在 AngularJS 应用程序中有大量使用 import 关键字导入 HTML 模板的示例。但我尝试了一下，因为我的想法已经用完了。
@PetrAveryanov 我试过了，由于某种原因，它现在会将.js 附加到我的所有 HTML 文件中，这会导致错误 - 找不到 404。我不确定这是不是正确的做法。

标签： angularjs webpack systemjs es6-module-loader webpack-3

【解决方案1】：

您可能想使用angular2-template-loader 而不是通用的。

【讨论】：

认为我使用的不是 Angular 而是 AngularJS。
你的依赖明确说你是，但不管怎样，ng1有一个类似的包
你说得对，这是因为我正在设计单水疗中心的原型，以后会用到它。

【解决方案2】：

这从根本上解决了问题，通过不使用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

【讨论】：