reactjs - Webpack 开发服务器在热重载时重置状态

Question

我是 webpack 的菜鸟，我需要一些帮助。

每当我更改并保存文件时，它都会重新加载页面，但它会删除我目前拥有的所有数据，所以我必须再次填写表格，这让我的一切变得更加困难。

我运行 webpack

webpack-dev-server --mode development --open --hot

这是我的 webpack 配置

const path = require('path');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        my_entry: './src/index.tsx',
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".css"],
        alias: {
            '@common': path.resolve(__dirname, 'src/common'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@webparts': path.resolve(__dirname, 'src/WebParts')
        }
    },
    devtool: "source-map",
    output: {
        path: path.join(__dirname, '/dist'),
        filename: '[name].bundle.min.js',
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i, 
                loader: "file-loader?name=/public/icons/[name].[ext]"
            }
        ]
    },
    plugins: [
        // new webpack.DefinePlugin({
        //   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        // }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

标签： reactjswebpack