0

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

2 回答 2

2

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'
};
于 2021-09-11T09:32:20.557 回答
0

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

安装特定版本：

$ npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0
于 2022-01-24T16:49:41.167 回答