Javascript & Webpack: Error: Unknown option '--watch-content-base'

Question

我正在尝试将 WebPack 集成到我的 package.json 文件的脚本中。我正在观看一个视频来尝试执行此操作，在我输入 'npm start'.

之前它运行良好

我在终端阅读中收到一条错误消息：

[webpack-cli] Error: Unknown option '--watch-content-base'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! frontend@1.0.0 start: `webpack-dev-server --watch-content-base --open`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the frontend@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

而且我不明白为什么我会收到这个错误，考虑到我正在观看的视频工作得很好。如果我删除“--watch-content-base”它会起作用，但我正在尝试确保任何代码更改都会在服务器上自动更新。

这是我的 package.json 文件：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --watch-content-base --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

Answer 1

Web pack 5 不再有 contentBase，而是 static 用于开发服务器中的内容。您应该删除 dist 文件夹中之前的 main.js 并将这段代码粘贴到 webpack.config.js 中，然后粘贴到终端中的运行 npx webpack-dev-server 中。
请记住将所有 HTML 代码、CSS 代码和图像放在一个目录中，然后在浏览器中打开 localhost:8080。

const path = require('path');
    
module.exports = {
    entry: ' path of index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8080,
    },
    mode: 'development'
};

Answer 2

或者，您可以运行视频中使用的版本。查看 package.json 文件以了解您当前使用的版本。

安装特定版本：

$ npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0

Javascript & Webpack: Error: Unknown option '--watch-content-base'

Javascript & Webpack: Error: Unknown option '--watch-content-base'

javascript

node.js

webpack-5

webpack-cli