Windows 10 重新安装后，Nodemon 和 webpack-dev-server 热重载在 WSL 2 下不起作用 [英] Nodemon and webpack-dev-server hot reload not working under WSL 2 after Windows 10 resinstall

问题描述

几天前，我重新安装了 Windows 10.我正在开发以 express 作为后端和 React.js 作为前端的全栈 Web 应用程序.我正在使用 nodemon 为前端重新分配服务器和 webpack-dev-server.值得一提的是，我使用的是 WSL2.我注意到 nodemon 在保存文件时没有反应.我不得不手动输入 rs 来重新加载.一开始以为是nodemon的问题.在这里寻找类似的问题，但我发现的只是--watch，这没有帮助.并不是说我尝试过 webpack 并且问题仍然存在我一无所知.以下是一些有用的信息:webpack 命令:webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js --mode development.

A few days ago I re-installed Windows 10. I am developing full stack web app with express as backend and React.js as frontend. I am using nodemon to realod the server and webpack-dev-server for the frontend. Worth mentioning is that I am using WSL2. I noticed that nodemon has no reaction upon saving a file. I had to manually type rs to reload. At first thought it is a problem with nodemon. Looked for similar question here, but all I found was --watch, which did not help. Not that I've tried webpack and the issue persists I am clueless. Here is some useful info: webpack command: webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js --mode development.

webpack.config.js:

module.exports = {
    entry: ["babel-polyfill", "./app/index.jsx"],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            {
                test: /\.(jpg|png|svg)$/,
                loader: "file-loader",
                options: {
                    name: "[path][name].[hash].[ext]",
                },
            },
        ],
    },
    resolve: {
        alias: {
            components: __dirname + "/app/components",
            reducers: __dirname + "/app/reducers",
            constants: __dirname + "/app/constants",
            actions: __dirname + "/app/actions",
            store: __dirname + "/app/store",
            styles: __dirname + "/app/styles",
            assets: __dirname + "/app/assets/",
            api: __dirname + "/app/api/",
        },
        enforceExtension: false,
        extensions: [".js", ".jsx"],
    },
    output: {
        path: __dirname + "/public",
        publicPath: "/",
        filename: "index.js",
    },
    devServer: {
        contentBase: "./public",
        port: 8080,
    },
};

而且这两个在 Linux 笔记本电脑上都运行良好，并且在重新安装之前也很好.

Also both of these are working fine on Linux laptop and were fine before the re-installation.

推荐答案

我自己解决了这个问题.只是在这里发布以防有人遇到同样的问题.我现在的系统和重装前的区别是我升级到了WSL2.出于某种原因，nodemon 和 webpack-dev-server 热重载在 WSL2 中不起作用.降级到 WSL 1 解决了该问题.

I figured this out on my own. Just posting it here in case somebody encounters the same issue. The difference between my system now and before the re-installation is that I upgraded to WSL2. For some reason nodemon and webpack-dev-server hot reload does not work in WSL2. Downgrading to WSL 1 resolved the issue.

为了使其在 WSL 2 中工作，该项目需要位于 linux 文件系统内.(我很早就想出来了，只是忘记在这里发布了.)

In order for this to work in WSL 2, the project needs to be inside the linux file system. (I figured it out a long time ago, just forgot to post it here.)

这篇关于Windows 10 重新安装后，Nodemon 和 webpack-dev-server 热重载在 WSL 2 下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！