无法启动webpack / webpack

Question

i want to start webpack. I type this command

npm run dev

in the command shell where my project is and where the node_modules are. I get this error in the terminal:

> clear; npm run --silent sound:trash; ./bin/webpack --env development --watch; npm run --silent sound:microwave

[3;J




sh: 1: ./bin/webpack: not found

I have looked in node_modules/bin/ and there is a file named webpack. Can somebody help me? I am new in stackoverflow and new in using webpack.

Package JSON

{
  "name": "xxx",
  "version": "1.1.0",
  "description": "",
  "main": "src/js/init.js",
  "scripts": {
    "sound:plock": "play -q -v 0.2 $(find /usr/share/sounds/ -type f -name *device-added* | head -n 1)",
    "sound:microwave": "play -q -v 0.1 $(find /usr/share/sounds/ -type f -name *complete* | head -n 1)",
    "sound:trash": "play -q -v 0.15 $(find /usr/share/sounds/ -type f -name *trash*  | head -n 1)",
    "clean:js": "rm $(find ./static/ -type f -regex '.*\\.[jt]sx?'); npm run --silent sound:trash",
    "clean:dir": "rm -rf ./static; npm run --silent sound:trash",
    "build": "clear; npm run --silent clean:dir; ./node_modules/.bin/webpack --env production --progress; npm run --silent sound:microwave",
    "build:server": "./node_modules/.bin/webpack --env production --progress",
    "dev": "clear; npm run --silent sound:trash; ./bin/webpack --env development --watch; npm run --silent sound:microwave",
    "test": "clear; npm run --silent build; ./bin/mocha --compilers js:babel-core/register --require jsdom-global/register; npm run --silent sound:plock",
    "test:monitor": "nodemon -x \"rm -rf ./build; babel ./src --out-dir ./build; ./bin/mocha --compilers js:babel-core/register --require jsdom-global/register; npm run --silent sound:plock\"",
    "stats": "./node_modules/.bin/webpack --env production --profile --json > webpack-build-stats.json"
  },
  "repository": {
    "type": "git",
    "url": "git@gitlab.gereon-reus.de:/l3pweb/pipeline"
  },
  "author": "",
  "license": "UNLICENSED",
  "devDependencies": {
    "@types/jquery": "*",
    "awesome-typescript-loader": "*",
    "babel-core": "*",
    "babel-eslint": "*",
    "babel-plugin-transform-object-rest-spread": "*",
    "babel-preset-env": "*",
    "babel-preset-es2015": "*",
    "babel-preset-flow": "*",
    "babel-preset-react": "*",
    "browser-sync": "*",
    "browser-sync-webpack-plugin": "*",
    "copy-webpack-plugin": "*",
    "css-loader": "*",
    "eslint": "*",
    "eslint-loader": "*",
    "eslint-plugin-flowtype": "*",
    "extract-text-webpack-plugin": "*",
    "file-loader": "*",
    "google-fonts-webpack-plugin": "*",
    "html-webpack-plugin": "*",
    "jsdom": "*",
    "jsdom-quokka-plugin": "*",
    "json-loader": "*",
    "less": "*",
    "less-loader": "*",
    "node-sass": "*",
    "nodemon": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "svg-loader": "*",
    "trash-cli": "*",
    "ts-loader": "*",
    "ts-node": "*",
    "tslint": "*",
    "tslint-eslint-rules": "*",
    "typescript": "*",
    "url-loader": "*",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "*",
    "webpack-config": "*",
    "webpack-merge": "*"
  },
  "dependencies": {
    "@cartok/dagre-d3": "^0.4.52",
    "@cartok/hierarchy-select": "^1.0.0",
    "babel-polyfill": "^6.23.0",
    "d3": "^3.5.17",
    "datatables.net": "^1.10.15",
    "datatables.net-bs": "^1.10.15",
    "datatables.net-buttons": "^1.4.0",
    "datatables.net-buttons-bs": "^1.4.0",
    "datatables.net-colreorder": "^1.3.3",
    "datatables.net-colreorder-bs": "^1.3.3",
    "datatables.net-fixedheader": "^3.1.2",
    "datatables.net-fixedheader-bs": "^3.1.2",
    "datatables.net-keytable": "^2.2.1",
    "datatables.net-keytable-bs": "^2.2.1",
    "datatables.net-responsive": "^2.1.1",
    "datatables.net-responsive-bs": "^2.1.1",
    "datatables.net-scroller": "^1.4.2",
    "datatables.net-scroller-bs": "^1.4.2",
    "datatables.net-select": "^1.2.2",
    "datatables.net-select-bs": "^1.2.2",
    "dom-node-template": "^1.0.1",
    "jquery": "^3.2.1",
    "l3p-core": "^2.5.2",
    "list.js": "^1.5.0",
    "literal-observer": "^0.5.1",
    "lodash-es": "^4.17.4"
  },
  "quokka": {
    "babel": {
      "presets": [
        "env",
        "flow"
      ],
      "polyfill": true
    },
    "plugins": [
      "jsdom-quokka-plugin"
    ],
    "ts": true
  }
}

Answer 1

The correct path for webpack in a node project would be ./node_modules/.bin/wepback

And in a npm script you get access to all node modules as if they were on the PATH so you would want this:

"dev":"clear; npm run --silent sound:trash; webpack --env development --watch; npm run --silent sound:microwave"

Note that webpack doesn't need the folder scoping within the package.json

EDIT: Or to keep it consistent with your build script:

"dev":"clear; npm run --silent sound:trash; ./node_modules/.bin/webpack --env development --watch; npm run --silent sound:microwave"

Answer 2

When running an NPM script defined in package.json , you do not need to specify relative paths to executables inside of the .\\node_modules\\.bin folder. In your case, that means replacing all occurrences of either:

./node_modules/.bin/webpack
./.bin/webpack

With just:

webpack

This will ensure that your NPM scripts are able to resolve the executables correctly.