React import html - 模块解析失败：您可能需要适当的加载器来处理此文件类型答案

【问题标题】：React import html - Module parse failed: You may need an appropriate loader to handle this file typeReact import html - 模块解析失败：您可能需要适当的加载器来处理此文件类型
【发布时间】：2020-11-17 19:17:29
【问题描述】：

我想导入一个html文件并转换成json。

const DocHtml = require('../../Shared/assests/index.html');
const template = { __html: DocHtml };

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      },
    ],
  },
};

但它会引发错误提示...

./src/User/Shared/assests/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml">
| <head>

【问题讨论】：

我面临同样的错误。你设法解决了吗？谢谢！
Alex 是的，解决了它。我会发布答案

标签： reactjs webpack create-react-app webpack-html-loader

【解决方案1】：

经过大量研究，我想通了。

// Add this to react node-module webpack.config.js file
module.exports = {
  module: {
    loaders: [
      { 
        test: /\.html$/,
        exclude: /node_modules/,
        include: /src/User/Shared/ + /assests/,
        loader: 'html-loader'
      }
    ],
  },
};

【讨论】：