react-从零开始搭建项目-webpack-dev-server上一篇 react-从零开始搭建项目-webpack配

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

上一篇我们简单打包了一个使用了import及JSX语法的react组件并取得了成功，这一篇我们主要来解决一下以下这个问题：

为什么用create-react-app创建的项目可以在通过localhost:3000来访问？并且每次修改代码后，项目会自动更新（热更新）？

其实大概是这个原因：

热更新的实现主要是因为webpack-dev-server它帮我们开了一个web服务，可以监听到文件的变化，然后触发webpack编译，这里的编译并没有直接生成静态文件，而时存储在内存中。具体的原理还有待探究。

既然是web服务，我们就能通过ip地址加端口号访问到，从而实现前后端分离配置（不需要本地运行一个项目服务器），而且还能配置代理来调试接口，从而可以写个简单的node服务来mock数据，还可以通过代理解决开发中跨域的问题（当然这里本文都不会涉及，后面可以专门研究一下），所以webpack-dev-server给前端开发提供了很大的方便。

可以看一下webpack-dev-server一张经典的运行原理图，感兴趣的同学可以花时间去研究一下（我是挺感兴趣的，但是缺了点时间，后面再看看）

后面再看看：学不动了，不想努力了

webpack-dev-server配置

上面大概介绍了下webpack-dev-server，那我们把它配置起来吧！

使用webpack-dev-server前我们需要安装依赖：npm i webpack-dev-server -D

然后配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  .....
  // webpack-dev-server配置
  devServer: {
    compress: true, // 启动Gzip
    port: 3000, // 端口
    open: true // 自动打开浏览器
  }
}

devServer的配置项还是挺多的，不过这次我们这三个就够了。

然后执行npx webpack-dev-server，项目执行起来，可以看到浏览器自动打开了localhost:3000,并显示了我们的react组件，修改组件代码后实现了热更新。

用npx，是因为webpack-dev-server并不是安装在全局中，所以无法直接运行

为了启动方便，我们可以在package.json文件中配置start命令

"scripts": {
  "start": "npx webpack-dev-server"
}

直接执行npm start则可以启动项目了。

react-从零开始搭建项目-配置各种webpack-loader

react-从零开始搭建项目-webpack-dev-server

上一篇

前言

webpack-dev-server配置

下一篇