个人中心
gpt4 book ai didi

javascript - 无法从reactjs中的webpack加载器加载html

转载 作者：行者123 更新时间：2023-11-30 06:24:31 25 4
gpt4 key购买 nike

我是 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;

我尝试了很多教程，但无法解决这个问题，我可能做错了什么？

最佳答案

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

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

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

关于javascript - 无法从reactjs中的webpack加载器加载html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51281401/

25 4 0
文章推荐： javascript - 自定义电子邮件的 regardingobjectid 查找下拉列表
文章推荐： java - 背景图像不工作 javaFX
文章推荐： Java gridbaglayout问题
文章推荐： java - Websphere 上传 EAR 文件，堆问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com