Webpack? Create React App? 没有，Vite!! 〜 用于React开发环境的Webpack构建 [开发服务器/HMR剪辑]
开场白
在这个“Webpack？Create React App？不，Vite！”系列中，我们将分为5次来讨论以下内容。
-
- 通过使用标题中的工具进行React开发环境的构建来理解“编译”、“打包”和“构建”在JS中的含义
- 体验vite技术的强大和“爆速”特性
我将以下的标题设想为现状。
只需要一个选项：
了解编译、打包和构建步骤
以下是使用webpack搭建React开发环境的方式[打包器/编译器篇]←上一篇
本次的主题是使用webpack构建React开发环境（开发服务器和热模块替换）。
1. 使用Create React App创建React开发环境
2. 使用Vite创建React开发环境及其技术的强大之处
接下来的说明将基于以下存储库中的组件导向简单应用程序使用React进行。建议您将其放在手边，并边确认边进行。
通过webpack搭建React开发环境[开发服务器/HMR版本]
我們已經完成了有關編譯和打包的設置，但是如果要進行實際的開發，目前的設置非常不方便。例如，在檢查代碼更新時，需要手動編譯現有的代碼，並在瀏覽器中進行測試和驗證，非常繁瑣。
這時候就輪到開發伺服器登場了。開發伺服器的角色是像正式環境一樣接收HTTP請求並返回響應，以提高開發者體驗（DX），例如進行測試等。以下我們將稍微詳細介紹。
在开发服务器上准备一个舒适的开发环境。
開発用服务器是开发人员在本地环境中运行、测试和调试应用程序所使用的软件工具。开发用服务器提供以下功能。
热加载（Live Reload）：当源代码发生变化时，自动刷新浏览器页面。这使得开发者能够立即视觉确认变更的结果。
热模块替换（HMR）：
在应用程序运行时，如果有特定模块（源代码的一部分）发生变化，则会检测并替换它。在此过程中，可以反映特定代码的变化，而无需完全重新加载浏览器。
API模拟：
在前端开发中，通过模拟服务器的API响应，即可在后端服务器尚未准备就绪或者离线工作的情况下进行开发。
静态文件服务：
开发者可以使用开发服务器将静态文件（如HTML、CSS、JavaScript等）提供给浏览器，并确保这些文件在浏览器中正常运行。
通过提供这些功能，开发服务器为开发者提供了一个能够高效、快速检测问题并解决问题的环境。然而，请注意开发服务器只是用于开发环境，并且基于性能和安全的考虑，在生产环境中应该使用专用的生产服务器。
使用webpack时，我们使用webpack-dev-server。webpack-dev-server是基于webpack的开发服务器。在本次开发中，我们会学习Hot Module Replacement（HMR）和自动刷新功能1，即监视文件更改并重新加载浏览器。在进行设置之前，让我们先了解每个功能是如何实现的流程。（如果你只关心能否运行，可以跳过这部分，没有问题的。）
3.2. 实时重新加载
请注意，热加载是一项功能，当源代码发生更改时，它会自动更新浏览器。一般情况下，此过程按照以下步骤进行。
-
- 在文件系统1中，源代码会被修改。
-
- 开发服务器会检测到这一变化，并加载更新后的源代码文件。
-
- 开发服务器会编译和打包更新后的源代码文件。
-
- 开发服务器会向浏览器发送刷新信号。
-
- 浏览器会请求更新后的打包文件。
-
- 开发服务器会将更新后的打包文件返回给浏览器。
- 浏览器会使用更新后的打包文件重新加载页面。
如果使用webpack设置开发服务器，则可以选择使用此热加载或后面介绍的HMR之一来进行使用。2
3.3. 热模块替换 (HMR)
HMR提供了替换特定模块（源代码的一部分）的功能。您可以在不完全重新加载浏览器的情况下，反映特定代码的更改。如果您想了解更详细的机制说明，请参阅下面的文章。
第一篇文章作为了解webpack HMR的内部结构的参考。由于撰写年份有些旧，其中包含了一些目前版本的webpack中不再需要的配置。（例如，webpack.HotModuleReplacementPlugin会在4及以上版本中自动应用以启用HMR功能。）
根据以上的文章内容，一般情况下，功能是通过以下流程实现的。
-
- 文件系统会对源代码进行更改。
-
- 文件系统会将这些更改通知给Webpack编译器。
-
- Webpack编译器会编译更新的模块。
-
- Webpack编译器会通过HMR清单将更新信息通知给Webpack服务器。
-
- Webpack服务器会通过WebSocket将HMR清单发送给HMR运行时。
-
- HMR运行时会通过HTTP请求更新的模块。
-
- Webpack服务器会将更新的模块返回给HMR运行时。
- HMR运行时会在不刷新整个页面的情况下将更新应用到浏览器中。
3.4. 设置开发服务器和HMR。
先不再强调前期的知识补充，我们开始设置吧。
首先是安装。
npm i -D webpack-dev-server
我們將設定寫在config中。
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: "bundle.js"
},
...
+ devServer: {
+ // 自動でブラウザを開く
+ open: true,
+ //開くポート
+ port: 9000,
+ // HMRの有効化(webpack4系からデフォルトで有効化しているみたいです)
+ hot: true,
+ //配信するコンテンツのルートディレクトリ
+ static: [
+ {
+ directory: path.join(__dirname, "dist"),
+ }
+ ]
+ },
};
接下来我们将添加一个插件，该插件可以根据重新构建后的内容自动生成HTML。
npm i -D html-webpack-plugin
设定也
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: "bundle.js"
},
...
devServer: {
// 自動でブラウザを開く
open: true,
//開くポート
port: 9000,
// HMRの有効化(webpack4系からデフォルトで有効化しているみたいです)
hot: true,
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'index.html',
+ filename: 'index.html',
+ hash: true,
+ }),
]
},
};
这个就足够了吧？很遗憾。虽然上面已经完成了基本的JS文件设置，但是React的设置需要另外进行。原来是使用react-hot-loader，但现在似乎React已经本地支持Fast Refresh，我们会使用它。
请安装。
npm i react-refresh
此外，还需要安装一个能够很好地协调上述react-refresh和webpack之间的插件。
npm i -D @pmmmwh/react-refresh-webpack-plugin
在babel-loader的配置中添加react-refresh/babel插件。
const path = require("path");
+ const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
mode: 'development',
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
+ options: { plugins: ['react-refresh/babel']},
},
],
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
hash: true,
}),
+ new ReactRefreshPlugin()
},
};
终于这样做到这一点
我可以帮你搞定。
非常长对吧。通过仔细设置webpack可以启用HMR的功能。也可以说，推广HMR的主要是webpack。
到目前为止，我们分两次介绍了使用webpack构建舒适的React开发环境。原本需要将这么多配置都交给webpack来做，真是个必要的工作呢。
好的，下一次我们将使用一个名为Create React App的开发工具，这是由Facebook公司创建的。我们来看看它能够将我们迄今为止所做的过程缩短多少。
如果你对下次的事情感到好奇或者觉得有所收获，请务必点赞或者收藏，这对我以后的努力非常重要。非常感谢！
参考
