3

我对 reactjs 和 webpack 很陌生。我想通过使用 html-loader 和 webpack 将 html 文件加载到 reactjs，但出现此错误

Failed to compile.

./src/test_ts.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
| <body>

这是我的 webpack 配置

var path = require("path");
var webpack = require("webpack");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");

module.exports = {
  entry: "./src/header.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "app.bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "html"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  },
  stats: {
    colors: true
  },
  devtool: "source-map"
};

这就是我要加载的地方

import React from "react";
import { Button } from "reactstrap";
var htmlContent = require("./test_ts.html");

class Header extends React.Component {
  render() {
    return <div></div>;
  }
}

export default Header;

我尝试遵循许多教程但无法解决此问题，我可能做错了什么？

4

1 回答 1

0

将以下规则添加到您的 webpack.config 文件中：

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

在此之前使用命令安装 html-loader： npm i -D html-loader ：

于 2019-04-30T20:34:55.570 回答