Webpack npm script cannot find command "src/index.js"

Question

I am having trouble with webpack, or at-least I assume it is with webpack.

I have installed it using npm. I have been following the Mithril.js Simple App tutorial which says to do the following in my package.json

package.json

{
  "name": "my-project",
  "scripts": {
    "start": "webpack src/index.js --output bin/app.js -d --watch"
  }
}

I ran the following command in the root of my project directory which contains a src/ folder that has my index.js file. I also have a bin/ folder which will hold the output from the webpack command specified in my package.json file shown above.

npm install webpack webpack-cli

So I proceed to run:

npm start

Below is the error that I get at runtime. Something about not being able to find src/index.js which is there and not misspelled, I checked more than once.

Direct Terminal output:

user@ubunutu:~/Projects/mothersrfc/client$ ll
total 60
drwxrwxr-x  2 jreyes jreyes  4096 Jan  6 21:45 bin
drwxrwxr-x 97 jreyes jreyes  4096 Jan  6 21:09 node_modules
-rw-rw-r--  1 jreyes jreyes   382 Jan  6 22:23 package.json
-rw-rw-r--  1 jreyes jreyes 42984 Jan  6 21:09 package-lock.json
drwxrwxr-x  2 jreyes jreyes  4096 Jan  6 22:26 src
user@ubunutu:~/Projects/mothersrfc/client$ npm start
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3527/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] start /home/jreyes/Projects/mothersrfc/client
> webpack src/index.js --output bin/app.js -d --watch

[webpack-cli] Unknown command 'src/index.js'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack src/index.js --output bin/app.js -d --watch`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jreyes/.npm/_logs/2021-01-07T05_00_13_372Z-debug.log
user@ubunutu:~/Projects/mothersrfc/client$ 

and here is my error log from npm....

0 info it worked if it ends with ok
1 verbose cli [ '/snap/node/3527/bin/node', '/snap/node/3527/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 warn lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3527/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /snap/node/3527/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jreyes/Projects/mothersrfc/client/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
10 verbose lifecycle [email protected]~start: CWD: /home/jreyes/Projects/mothersrfc/client
11 silly lifecycle [email protected]~start: Args: [ '-c', 'webpack src/index.js --output bin/app.js -d --watch' ]
12 silly lifecycle [email protected]~start: Returned: code: 2  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `webpack src/index.js --output bin/app.js -d --watch`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/snap/node/3527/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
14 verbose stack     at EventEmitter.emit (events.js:315:20)
14 verbose stack     at ChildProcess.<anonymous> (/snap/node/3527/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
14 verbose stack     at ChildProcess.emit (events.js:315:20)
14 verbose stack     at maybeClose (internal/child_process.js:1048:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/jreyes/Projects/mothersrfc/client
17 verbose Linux 5.4.0-59-generic
18 verbose argv "/snap/node/3527/bin/node" "/snap/node/3527/bin/npm" "start"
19 verbose node v14.15.4
20 verbose npm  v6.14.10
21 error code ELIFECYCLE
22 error errno 2
23 error [email protected] start: `webpack src/index.js --output bin/app.js -d --watch`
23 error Exit status 2
24 error Failed at the [email protected] start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 2, true ]

---

Edit: I'm using webpack version 5.11.1 and webpack-cli version 4.3.1

Answer 1

You can do this:

package.json

// package.json
{
    "name": "my-project",
    "scripts": {
        //"start": "webpack src/index.js --output bin/app.js -d --watch",
       "build": "webpack --mode=production webpack.config.js",
       "start": "webpack-dev-server --mode=development webpack.config.js"
    }
}

webpack.config.js

const path = require("path")

module.exports = {
   entry: path.join(__dirname, "./src/index.js"),
   output: {
     filename: "[name].bundle.js",
     path: path.resolve(__dirname, "dist")
  },
  ...
}