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

Question

Here is my folder structure这是我的文件夹结构

when i tried to run my react app it give me this error Failed to compile.当我尝试运行我的反应应用程序时，它给了我这个错误无法编译。

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

I tried google it and it says i need to create manual loader to load my html file.我试过谷歌它，它说我需要创建手动加载器来加载我的 html 文件。 It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.它与 webpack 有关，但我不知道如何以及在何处配置加载程序以加载 owl.html 文件。

Answer 1

Short answer:简短的回答：

No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.不，您不能简单地通过插件将 HTML/CSS/JS 转换为 React JS。

There is no need of webpack her, as it is already provided and packed by create-react-app , you can simple create a component of your page template provided.不需要webpack她，因为它已经由create-react-app提供和打包，您可以简单地创建您提供的页面模板的组件。

Long Answer:长答案：

React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. React 项目架构说，必须为每个 UI 页面/段/部分/小部件创建一个 React JS 组件。 So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.因此，要从 html 文件创建一个响应页面，只要您简单地在 components 文件夹中创建一个名为Owl.js的components文件。

In the Owl.js write the following:在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>
  )
}

Use this newly created component in the App.js you have by importing it into.通过将它导入到您拥有的App.js中使用这个新创建的组件。

Also use the css by importing it simply in the Owl.js file, like this:还可以通过在Owl.js文件中简单地导入 css 来使用它，如下所示：

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

And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.最后，要使所有 JS 都用owl.js编写，您必须小心地将您在新创建的组件中使用的函数、侦听器和数据集成到 return 语句之外。

I hope this clears the confusion here.我希望这能消除这里的困惑。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-13 05:49:02

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-13 05:49:02

解决方案1
1 已采纳 2020-08-13 05:49:02