从零构建react项目（二）

最新推荐文章于 2022-09-28 19:46:39 发布

不会骑扫把的小女巫

最新推荐文章于 2022-09-28 19:46:39 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/qq_22836769/article/details/110563558

版权

本文是《从零构建React项目》系列的第二篇，讲解如何创建`Index.html`文件，配置Webpack，包括安装HtmlWebpackPlugin，自定义模板，以及设置Webpack的dev服务器，实现自动编译更新。通过这些步骤，可以提高开发效率，实现代码修改实时预览。

摘要由CSDN通过智能技术生成

文章目录

系列文章
从零构建react项目（一）

承接上文，我们安装了react， react-dom包，接下来就可以开始写react组件了，这一章我们就写个简单的时钟组件吧。
在index.js中先写个简单的组件：

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
   
    return (
        <h1>哈喽，我的大笨钟</h1>
    );
}
ReactDOM.render(<App />, document.body)

Index.html文件

我们写完代码，打包出来的都是一个main.js文件，所以我们还需要一个index.html文件来引入main.js。
我们可以直接在dist文件夹中新建一个index.html文件，但dist文件夹是webpack生成的，我们不能每次打包完都去自己新建一个html文件。
webpack的HtmlWebpackPlugin插件可以帮我们这个忙。这个插件可以为我们生成一个html文件，并且用<Script>标签自动引入打包好的js文件。