如何在 reactjs 中将 webpack.config.js 到 convert/transform 我的 HTML 文件配置到 JS 中？

Question

这是我的文件夹结构

当我尝试运行我的 React 应用程序时，它给了我这个错误编译失败。

./src/css/owl.html 1:0 模块解析失败：意外标记 (1:0) 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件。参见 https://webpack.js.org/concepts#loaders

我试过 google 它说我需要创建手动加载器来加载我的 html 文件。它与 webpack 有关，但我不知道如何以及在何处配置加载程序以加载 owl.html 文件。

Answer 1

简答：

不，你不能简单地通过插件将你的 HTML/CSS/JS 转换成 React JS。

不需要webpack她，因为它已经由create-react-app提供并打包，您可以简单地创建您提供的页面模板的组件。

长答案：

React 项目架构说，必须为每个 UI page/segment/section/widget 创建一个 React JS 组件。因此，如果要从 html 文件创建一个页面，您只需在 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>
  )
}

通过将其导入到 App.js 中使用这个新创建的组件。

也可以使用 css，只需将其导入 Owl.js 文件，如下所示：

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

最后，为了让所有的 JS 都写在 owl.js 中，你必须仔细地将你在新创建的组件中使用的函数、侦听器和数据从 return 语句中集成出来。

我希望这能消除这里的困惑。

如何在 reactjs 中将 webpack.config.js 到 convert/transform 我的 HTML 文件配置到 JS 中？

How can I configure webpack.config.js to convert/transform my HTML file into JS in reactjs?

javascript

reactjs

webpack

owl-carousel