0

I am trying to integrate WebPack into the scripts my package.json file. I was following a video to try and do it and it works fine up until I enter 'npm start'.

I get an error message in the terminal reading:

[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.

And I cannot understand why I'm getting this error considering in the video I was following it works just fine. If I remove ' --watch-content-base' it works but I'm trying to make sure any code changes are automatically updated on the server.

This is my package.json file:

{
  "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"
  }
}
stormshadow854
  • 57
  • 1
  • 1
  • 5

2 Answers2

3

Web pack 5 doesn't have contentBase anymore but static instead for content in the dev server. You should delete the previous main.js inside your dist folder and paste this chunk of code in webpack.config.js then run npx webpack-dev-server in the terminal.
Remember to put all your HTML code, CSS code and images inside one directory and open localhost:8080 in a browser.

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'
};
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Storm Souper
  • 56
  • 4
1

Alternatively, you could run the versions that are being used in the video. Have a look at the package.json file to see which versions you are currently using.

Installation of a specific version:

$ npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Dandesaj
  • 107
  • 8