Javascript 如何配置webpack.config.js以在reactjs中将HTML文件转换为js？_Javascript_Reactjs_Webpack_Owl Carousel

Javascript 如何配置webpack.config.js以在reactjs中将HTML文件转换为js？

javascript reactjs webpack

Javascript 如何配置webpack.config.js以在reactjs中将HTML文件转换为js？,javascript,reactjs,webpack,owl-carousel,Javascript,Reactjs,Webpack,Owl Carousel,这是我的文件夹结构当我试图运行我的react应用程序时，它给了我这个错误未能编译 ./src/css/owl.html 1:0 模块分析失败：意外令牌（1:0）您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看我试过谷歌，它说我需要创建手动加载程序来加载我的html文件。这是关于webpack的，但我不知道如何以及在何处配置loader来加载owl.html文件。简短回答：不，您不能简单地通过插件将HTML/CSS/JS转换为React JS 不需要web

这是我的文件夹结构

当我试图运行我的react应用程序时，它给了我这个错误未能编译

./src/css/owl.html 1:0 模块分析失败：意外令牌（1:0）您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看

我试过谷歌，它说我需要创建手动加载程序来加载我的html文件。这是关于webpack的，但我不知道如何以及在何处配置loader来加载owl.html文件。

简短回答：

不，您不能简单地通过插件将HTML/CSS/JS转换为React JS

不需要

webpack

her，因为它已经由

create react app

提供和打包，您可以简单地创建所提供页面模板的组件

长答案：

React项目架构表示，必须为每个UI页面/段/节/小部件创建React JS组件。因此，要在react中从html文件创建页面，simple必须在

components

文件夹中装入名为

Owl.js

的组件文件

在

Owl.js

中编写以下内容：

import React from 'react';

export default () => { 
  return (
    <React.Fragment>enter code here
      // paste the code from your owl.html file. (everything that is written under <body>)
    </React.Fragment>
  )
}

最后，要使所有的JS都用

owl.JS

编写，您必须仔细地将您在新创建的组件中使用的函数、侦听器和数据从return语句中集成起来

我希望这能消除这里的混乱。

请添加您当前拥有的网页配置（如果有），如果没有，请告诉我！我已经添加了3个依赖项网页包，网页包开发服务器，html网页包插件。但我还没有配置网页包。坦白地说，我不知道我在哪里以及如何配置它没有问题，请告诉我您正在使用create react app？还有，为什么您的css文件夹中有一个owl.html？在您的目录结构的公用文件夹中已经提供了一个html文件，在所有编译之后，它将作为加载到浏览器中的最终html文件。你有其他需要这个owl.html的用例吗？谢谢你对我的问题给了我很好的解释。我会试试你的解决办法。希望它能帮助我解决我的问题。当然，如果还有什么让你困惑的话，请告诉我！

import '~you-path~/owl.css';