时间戳

首页 > 解决方案 > 如何配置 webpack.config.js 以将我的 HTML 文件转换/转换为 reactjs 中的 JS？

javascript - 如何配置 webpack.config.js 以将我的 HTML 文件转换/转换为 reactjs 中的 JS？

问题描述

这是我的文件夹结构

在此处输入图像描述

当我尝试运行我的反应应用程序时，它给了我这个错误无法编译。

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

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

标签： javascriptreactjswebpackowl-carousel

解决方案

简短的回答：

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

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

长答案：

React 项目架构说，必须为每个 UI 页面/段/部分/小部件创建一个 React JS 组件。因此，要从 html 文件中创建一个页面，只要您简单地创建一个在文件夹中调用的组件Owl.js文件components。

在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导入其中来使用它。

也可以通过简单地在Owl.js文件中导入 css 来使用它，如下所示：

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

最后，为了让所有的 JS 都写在里面，owl.js你必须小心地将你在新创建的组件中使用的函数、监听器和数据整合到 return 语句之外。

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

推荐阅读