Question

大家晚上好，
我需要你的帮助，因为 4 小时后我不知道接下来要做什么。我有一个问题，我希望 webpack 开发服务器在我编辑 index 或 app.js 文件时自动更新。

问题是当我在终端中输入 npm start 时，浏览器会启动。
当一切都开始尝试编辑索引文件或 app.js 但在浏览器中没有任何反应时，看不到我的更改，并且在终端中未编译文件。我需要通过 ctrl + c 关闭 webpack-dev-server 并重新启动它，然后我才能看到更改。请在下面查看我从终端获得的信息和我的设置。

我使用 Windows 和 Ubuntu、zsh、Visual Studio Code。

我只想补充一点，我在 Mac 上尝试了相同的方法，并且没有问题。

Package.json

{
  "name": "webpack-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npx webpack-dev-server --open",
    "build": "npx webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    
    output: {
        path: path.resolve(__dirname, 'build'),
        
        filename: 'app.min.js',
        
    },
    module: {
        rules: [
            {
                test: /\.js$/,

                exclude: /node_modules/,
                
                use: 'babel-loader',
                
                
            }
        ]
        
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            
            filename: 'index.html'
           
        })
    ]
}

我的文件

├── package.json
├── node_modules
├── package-lock.json
├── README.md
├── src
│   ├── index.html
│   ├── app.js
│── .browserslistrc
│── .babelrc
└── webpack.config.js

输入 npm start 后的终端

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /mnt/e/Sites/react-helloworld
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: ee7a7b93215ba0b0a6a9
Version: webpack 4.41.2
Time: 6474ms
Built at: 03/19/2021 8:48:10 PM
     Asset       Size  Chunks             Chunk Names
app.min.js   1.43 MiB    main  [emitted]  main
index.html  374 bytes          [emitted]
Entrypoint main = app.min.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/app.js] 158 bytes {main} [built]
    + 29 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 523 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

Webpack 开发服务器不更新

0 个答案: