使用 typescript 和 webpack 进行热重载

Question

我在使用 Typescript 开发前端 (Redux) 和后端 (Express) 时遇到问题。我无法使热重载工作。这是根文件夹中

webpack.config.js

的配置：

const webpack = require('webpack');
const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');

const config = {
    cache: true,
    mode: 'development',
    entry: {
        'user': ['./dist/client/User/index', 'webpack-hot-middleware/client'],
        'guest': ['./dist/client/Guest/index', 'webpack-hot-middleware/client']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CheckerPlugin()
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/static'
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                exclude: /node_modules/,
                include: path.join(__dirname, 'client'),
                options: { cacheDirectory: true }
            }
        ]
    },
    node: { fs: 'empty' }
};

module.exports = config;

和

tsconfig.json

：

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react",
        "esModuleInterop": true,
        "outDir": "dist",
        "sourceMap": true,
        "baseUrl": "."
    },
    "include": ["src/**/*.ts", "src/**/*.tsx"],
    "exclude": ["node_modules"]
}

在

src

中我分开了两个文件夹

client

和

server

，我的

npm start

脚本是

tsc && node dist/server

。在

server/index

中，我声明了 webpack 编译器的使用，如下所示：

import config from '../../webpack.config';
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));

当我启动应用程序时，webpack 会正常构建，但当我在客户端文件中进行更改时，它永远不会构建热重载。我花了一整天但还是很困惑，还不知道如何解决。

Answer 1

对于后端（Express）：

• 使用nodemon，因为node直接不允许你热重载。

• npm install nodemon

• 然后使用

  npm run start

   代替 

  node index.js

   或 

  nodemon index.js
• 可以直接在

  package.json

  scripts中替换。

对于前端：

• 有时热重载不起作用，尽管这种情况非常罕见。
• 如果不起作用，你可以这样做：

• npm install --save-dev webpack webpack-dev-server react-refresh @pmmmwh/react-refresh-webpack-plugin

• 然后在

  webpack.config.js

  中添加react-refresh-webpack 像这样：

  plugin [
      new webpack.HotModuleReplacementPlugin(),
      new CheckerPlugin()
  ]

Answer 2

你目前使用的是 React 17 吗？

如果是这样，请在 .env 文件中创建以下内容

FAST_REFRESH=false

目录