Javascript 和 Webpack:错误:未知选项“--watch-content-base”

我正在尝试将 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"
  }
}
stack overflow Javascript & Webpack: Error: Unknown option '--watch-content-base'
原文答案
author avatar

接受的答案

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'
};

答案:

作者头像

另外,您可以运行视频中使用的版本。请查看 package.json 文件,以查看您当前正在使用的版本。

特定版本的安装:

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