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 作为前端的全栈网络应用程序。我正在使用 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 笔记本电脑上工作正常,并且在重新安装之前都很好。
这是我自己想出来的。只是 post 把它放在这里以防有人遇到同样的问题。我现在的系统和重装前的区别是我升级到了WSL2。由于某些原因,nodemon 和 webpack-dev-server 热重载在 WSL2 中不起作用。降级到 WSL 1 解决了这个问题。
编辑:为了使其在 WSL 2 中工作,项目需要位于 linux 文件系统中。 (我早就想出来了,只是忘了post这里。)
试试这个,它对我有用:
webpack -w --watch-poll
试试这个:
module.exports = {
//...
watchOptions: {
poll: 1000 // Check for changes every second
}
};
或者将您的文件移动到 WSL 文件系统中:
\wsl$\<distroname>\home\<username>
几天前我重新安装了 Windows 10。我正在开发以 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 笔记本电脑上工作正常,并且在重新安装之前都很好。
这是我自己想出来的。只是 post 把它放在这里以防有人遇到同样的问题。我现在的系统和重装前的区别是我升级到了WSL2。由于某些原因,nodemon 和 webpack-dev-server 热重载在 WSL2 中不起作用。降级到 WSL 1 解决了这个问题。
编辑:为了使其在 WSL 2 中工作,项目需要位于 linux 文件系统中。 (我早就想出来了,只是忘了post这里。)
试试这个,它对我有用:
webpack -w --watch-poll
试试这个:
module.exports = {
//...
watchOptions: {
poll: 1000 // Check for changes every second
}
};
或者将您的文件移动到 WSL 文件系统中:
\wsl$\<distroname>\home\<username>