Windows 10 重新安装后,Nodemon 和 webpack-dev-server 热重载在 WSL 2 下无法工作

问题描述 投票:0回答:3

几天前,我重新安装了 Windows 10。我正在开发全栈 Web 应用程序,以 Express 作为后端,以 React.js 作为前端。我正在使用 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

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 笔记本电脑上都工作正常,并且在重新安装之前都很好。

webpack webpack-dev-server windows-subsystem-for-linux nodemon hot-reload
3个回答
16
投票

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

编辑:为了使其在 WSL 2 中工作,该项目需要位于 Linux 文件系统内。


13
投票

试试这个:

module.exports = {
  //...
  watchOptions: {
    poll: 1000 // Check for changes every second
  }
};

观看和观看选项

或者将您的文件移动到 WSL 文件系统中:

\\wsl$\<distroname>\home\<username>

3
投票

试试这个,它对我有用:

webpack -w --watch-poll
© www.soinside.com 2019 - 2024. All rights reserved.