Question

第一次在 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。

我做错了什么？

Answer 1

如果您在浏览器控制台中看到消息 [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

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

1 个答案: