从零构建react项目（二）

最新推荐文章于 2024-04-26 10:01:17 发布

原创最新推荐文章于 2024-04-26 10:01:17 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript #webpack

react 同时被 2 个专栏收录

11 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

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

文章目录

系列文章
从零构建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文件。

webpack配置

安装：
npm install --save-dev html-webpack-plugin

配置：

// webpack.config.js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [new HtmlWebpackPlugin()],
    module: {...} // 之前的代码
}

然后我们再运行npm run build 就会发现在dist文件下多了一个index.html文件，且引入了main.js文件。
仔细看一看，就会发现html文件中并没有body元素，而且title也不是我们想要的，这些可以定制嘛？毕竟现在都流行个性定制嘛。
HtmlWebpackPlugin插件支持提供模板。在src目录下新建一个index.html文件，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大笨钟</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack配置:

// webpack.config.js 文件
module.exports = {
    plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	})]
}

执行npm run build, 会发现dist中的index.html的内容变成了我们想要的内容。

自动编译更新： dev服务器

有没有发现我们每次编写代码，都需要执行npm run build来打包生成文件，然后再刷新页面才能看到代码效果，很累欸，有没有偷懒的办法？
来整一个简单的web服务器。

安装：

npm i --save-dev webpack-dev-server
webpack-dev-server将webpack与提供实时重载的开发服务器一起使用，这应该仅用于开发环境。

使用：

定义npm 脚本

// package.json 文件
"script": {
	"start": 'webpack serve'
}

在终端中执行：npm run start, 在没有配置的情况下，启动的web服务器默认端口号是8080，访问：http://localhost:8080/。
现在我们修改index.js的代码，会发现我们不需要再执行 build命令，修改代码之后会自动编译，编译结束页面就会更新。
这种默认配置难免会很不灵活，为此我们必须进行手动设置。

配置

// webpack.config.js
module.exports = {
	...其他配置,
	devServer: {
		port: 8000, // 指定要监听请求的端口号
		compress: true, // 启用gzip压缩		
        open: true, // 启动服务将自动打开浏览器
	}
}

port
指定了端口号以后，我们再次启动服务，就可以通过 http://localhost:8000来访问页面，而不是默认的3000端口。不同的项目启动不同端口的服务，不会冲突。
compress
当我们需要从服务器请求index.html之类的文件时，原文件大小可能是100kb，虽然并不影响数据返回和页面展示，但效率不高。文件太大的话怎么办？当然是压缩！
我们可以将压缩后的文件发送给浏览器，节省带宽和下载时间，浏览器下载压缩文件将其解压。展示给用户的速度会大大加快。
没有启用gzip压缩之前，访问http://localhost:8000/index.html，这时index.html大小为456B

启用之后：可以看出文件大小明显变小。
open
设置后，每次启动服务区都会自动在浏览器中打开http://localhost:8000页面。