Javascript 和 Webpack：错误：未知选项“--watch-content-base”答案

【问题标题】：Javascript & Webpack: Error: Unknown option '--watch-content-base'Javascript 和 Webpack：错误：未知选项“--watch-content-base”
【发布时间】：2021-10-28 11:15:16
【问题描述】：

我正在尝试将 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"
  }
}

【问题讨论】：

标签： javascript node.js webpack-5 webpack-cli

【解决方案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'
};

【讨论】：