Express 客戶端的熱重載 (React+Webpack)

Question

我有一個 React + Webpack + Express 設置。 React 文件由 Webpack 捆綁並存儲在/dist目錄中。 在開發模式下，Webpack 在后台以監視模式運行。 新的更改在 dist 目錄中更新。 Express 服務器與 Webpack 進程分開運行。 根據請求localhost:3000/ Express 服務器向客戶端發送dist/index.html文件。

我想在每次 Webpack 觀察程序完成編譯 React 文件（前端）時啟用頁面重新加載。 到目前為止，我所看到的是人們通過 webpack 熱重新加載快速服務器，那一刻發生了一些變化，但這並沒有更新客戶端。

當 Webpack 重新捆綁前端代碼時，有沒有辦法熱重新加載客戶端（通過 Express？）？

webpack.config.js

const path = require('path');
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/index.js',
        vendor: ['semantic-ui-react'],
    },
    output:{
        path: path.join(__dirname, '/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/i,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000,
                    },
                },
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it uses publicPath in webpackOptions.output
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new Dotenv(),
        new MiniCssExtractPlugin('styles.css')
    ]
};

服務器.js

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.use(express.static('dist'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/dist/index.html');
});

app.listen(port, () => console.log('App listening on port 3000!'));

Answer 1

以這種方式開發在以下幾個方面是次優的：

1.）您當前正在開發的方式僅考慮用於生產（這是一種老式（2015）方法，由於應用程序的增長和需要手動重新啟動過程，編譯時間可能非常耗時，因此大部分已被棄用）。 雖然您可以使用nodemon ，它會在保存更改后重新啟動進程，但它會破壞 HMR。 因此，更好的方法是使用webpack-dev-server創建一個不需要 express 來提供已編譯資產的僅開發服務器。 相反，這將在保存時創建更快的增量更新，然后在 HMR 事件后重新提供。 當應用程序准備好投入生產時，您才能構建整個應用程序（使用webpack ），然后快速服務這些生產資產。

2.) 您的整個應用程序代碼似乎被捆綁到一個大型 JS + CSS 文件中。 這意味着，如果您的應用程序有多個路線，那么無論用戶登陸哪條路線，都必須下載整個應用程序。 這對整體性能非常不利，並且對帶寬造成不必要的浪費。 理想情況下，您需要一個 PWA（漸進式 web 應用程序）將代碼拆分為塊，並且僅在需要/請求時才下載。 例外情況是，如果您使用 Webpack 構建 UI 庫，但情況似乎並非如此。

3.) 使用devtool: 'source-map'非常耗費資源，會產生更長的編譯時間，並且大部分已被'cheap-module-source-map'取代（以便更快地重新編譯）。 它不是一個完美的替代品，但它非常接近。

您可以查看我的react-starter-kit （特別是config 目錄和webpack.config.js 文件），而不是包含一英里長的 Webpack 配置和注釋，其中已經包含帶有注釋的開發服務器設置。 您絕不需要使用此樣板文件，但它應該讓您了解如何重構 Webpack 配置以更靈活地進行開發。