Webpack 服务不会在文件更改时重新加载

如何解决Webpack 服务不会在文件更改时重新加载

第一次在 Stack 上写作，请不要对我太苛刻。

我目前在使用 webpack 开发服务器时遇到问题（webpack 服务不是 webpack-dev-server）。 Webpack 可以看到对我的文件所做的更改（每次保存文件时都会显示编译），但实际页面根本没有更改。

例如，除非我手动重新加载页面（没有实时重新加载），否则不会显示更改我的 HTML 文件，但除非我完全关闭服务并重新启动它，否则服务器将无法识别对我的 .js 文件的更改。

我正在处理一个简单的 HTML 页面，其中包含两个 .js 文件和几个 .css

这是我的 package.json

  "name": "s2i-pullution","version": "1.0.0","description": "To correctly make the project run it's needed to have a personal Token for the AQICN API,","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","build": "webpack --watch --progress","dev": "webpack serve --hot --inline"
  },"repository": {
    "type": "git","url": "git+https://gitlab.com/gp1108/s2i-weather.git"
  },"keywords": [],"author": "","license": "ISC","bugs": {
    "url": "https://gitlab.com/gp1108/s2i-weather/issues"
  },"homepage": "https://gitlab.com/gp1108/s2i-weather#readme","devDependencies": {
    "dotenv-webpack": "^6.0.0","html-webpack-plugin": "^5.0.0","webpack": "^5.21.2","webpack-cli": "^4.5.0","webpack-dev-server": "^3.11.2"
  },"dependencies": {}
}

这里是 webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './public/scripts/search.js',plugins: [
    new Dotenv(),],output: {
    path: path.resolve(__dirname,'public/dist/'),},devServer: {
    contentBase: './public/',port: 8000,watchOptions: {
    poll:500,};

这是我的项目结构：

|s2i-pollution (main folder)
|---|webpack.config.js
|---|package.json
|---|package-lock.json
|---|node_modules (folder)
|---|.env
|---|public (folder)
|-----|index.html
|-----|city.html
|-----|images (folder)
|-----|styles (folder)
|-----|scripts
|-------|search.js
|-------|theme-chooser.js
|-----|dist (folder)
|-------|main.js

我已经用这行代码将 theme-chooser.js 导入到 search.js 中： import './theme-chooser.js';

我目前使用的是 Xubuntu 20.04 LTS。

我做错了什么？

解决方法

如果您在浏览器控制台中看到消息 [HMR] Waiting for update signal from WDS...，当您打开应用程序时，但没有看到消息 [WDS] Hot Module Replacement enabled. 和 [WDS] Live Reloading enabled.，那么您可以尝试添加参数 {{ 1}} 到您的 target: 'web' 像这样：

webpack.config.js

另外，请确保您的 search.js 文件中有以下三行代码：

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './public/scripts/search.js',plugins: [
    new Dotenv(),],output: {
    path: path.resolve(__dirname,'public/dist/'),},devServer: {
    contentBase: './public/',port: 8000,watchOptions: {
    poll:500,target: 'web',};

有关其他信息，您可以查看此处：Hot Module Replacement | Webpack