Git Bash and webpack

Question

Hello guys I'm trying to learn Webpack I've been following some tutorials and I've run into some problems. I've installed webpack locally in folder I am working in with npm install webpack --save-dev. I made two JS scripts and I wanted to bundle them and I've tried following command webpack script-1.js /.bundle.js in WindowsPowerShell (I'm using Windows 7). Now this made the following error

webpack is not recognized as an internal or external command operable program or batch file

So then I installed webpack globally, and when I used the same command in PowerShell (I have opened it as an admin), it made bundle.js file but not in the directory I was working in, but in C:
Now after this failure I've decided to try using git bash. First I've tried this command webpack script-1.js /.bundle.js and got the following error

bash: webpack: command not found

Finally after some trying I was able to make it work using this command in git bash node_modules/.bin/webpack ./script-1.js bundle.js
Is there a way to fix this, so I can just type webpack instead of whole path ? Also is there a way to fix path in PowerShell ?

This is mine package.json

{
  "name": "webpack-playlist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/webpack-playlist.git"
  },
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iamshaunjp/webpack-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/webpack-playlist#readme",
  "devDependencies": {
    "webpack": "^2.3.3"
  }
}

and this is package.json located in node_modules/webpack/package.json

{
  "_args": [
    [
      {
        "raw": "webpack",
        "scope": null,
        "escapedName": "webpack",
        "name": "webpack",
        "rawSpec": "",
        "spec": "latest",
        "type": "tag"
      },
      "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist"
    ]
  ],
  "_from": "webpack@latest",
  "_id": "[email protected]",
  "_inCache": true,
  "_location": "/webpack",
  "_nodeVersion": "7.4.0",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/webpack-2.3.3.tgz_1491205859622_0.6350918470416218"
  },
  "_npmUser": {
    "name": "sokra",
    "email": "[email protected]"
  },
  "_npmVersion": "4.0.5",
  "_phantomChildren": {},
  "_requested": {
    "raw": "webpack",
    "scope": null,
    "escapedName": "webpack",
    "name": "webpack",
    "rawSpec": "",
    "spec": "latest",
    "type": "tag"
  },
  "_requiredBy": [
    "#DEV:/",
    "#USER"
  ],
  "_resolved": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz",
  "_shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78",
  "_shrinkwrap": null,
  "_spec": "webpack",
  "_where": "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist",
  "author": {
    "name": "Tobias Koppers @sokra"
  },
  "bin": {
    "webpack": "./bin/webpack.js"
  },
  "bugs": {
    "url": "https://github.com/webpack/webpack/issues"
  },
  "dependencies": {
    "acorn": "^4.0.4",
    "acorn-dynamic-import": "^2.0.0",
    "ajv": "^4.7.0",
    "ajv-keywords": "^1.1.1",
    "async": "^2.1.2",
    "enhanced-resolve": "^3.0.0",
    "interpret": "^1.0.0",
    "json-loader": "^0.5.4",
    "loader-runner": "^2.3.0",
    "loader-utils": "^0.2.16",
    "memory-fs": "~0.4.1",
    "mkdirp": "~0.5.0",
    "node-libs-browser": "^2.0.0",
    "source-map": "^0.5.3",
    "supports-color": "^3.1.0",
    "tapable": "~0.2.5",
    "uglify-js": "^2.8.5",
    "watchpack": "^1.3.1",
    "webpack-sources": "^0.2.3",
    "yargs": "^6.0.0"
  },
  "description": "Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
  "devDependencies": {
    "beautify-lint": "^1.0.3",
    "benchmark": "^2.1.1",
    "bundle-loader": "~0.5.0",
    "codacy-coverage": "^2.0.1",
    "codecov.io": "^0.1.2",
    "coffee-loader": "~0.7.1",
    "coffee-script": "^1.10.0",
    "coveralls": "^2.11.2",
    "css-loader": "~0.25.0",
    "es6-promise-polyfill": "^1.1.1",
    "eslint": "3.12.2",
    "eslint-plugin-node": "^3.0.5",
    "express": "~4.13.1",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "file-loader": "~0.9.0",
    "i18n-webpack-plugin": "^0.3.0",
    "istanbul": "^0.4.5",
    "jade": "^1.11.0",
    "jade-loader": "~0.8.0",
    "js-beautify": "^1.5.10",
    "less": "^2.5.1",
    "less-loader": "^2.0.0",
    "lodash": "^4.17.4",
    "mocha": "^3.2.0",
    "mocha-lcov-reporter": "^1.0.0",
    "nsp": "^2.6.1",
    "raw-loader": "~0.5.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "script-loader": "~0.7.0",
    "should": "^11.1.1",
    "simple-git": "^1.65.0",
    "sinon": "^1.17.7",
    "style-loader": "~0.13.0",
    "url-loader": "~0.5.0",
    "val-loader": "~0.5.0",
    "vm-browserify": "~0.0.0",
    "webpack-dev-middleware": "^1.9.0",
    "worker-loader": "~0.7.0"
  },
  "directories": {},
  "dist": {
    "shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78",
    "tarball": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz"
  },
  "engines": {
    "node": ">=4.3.0 <5.0.0 || >=5.10"
  },
  "files": [
    "lib/",
    "bin/",
    "buildin/",
    "hot/",
    "web_modules/",
    "schemas/"
  ],
  "gitHead": "ba24c1b163dc038ed738eb4a57dcb241bf63146d",
  "homepage": "https://github.com/webpack/webpack",
  "license": "MIT",
  "main": "lib/webpack.js",
  "maintainers": [
    {
      "name": "jhnns",
      "email": "[email protected]"
    },
    {
      "name": "sokra",
      "email": "[email protected]"
    },
    {
      "name": "thelarkinn",
      "email": "[email protected]"
    }
  ],
  "name": "webpack",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/webpack/webpack.git"
  },
  "scripts": {
    "appveyor:benchmark": "npm run benchmark",
    "appveyor:test": "node --max_old_space_size=4096 node_modules\\mocha\\bin\\mocha --harmony test/*.test.js",
    "beautify-lint": "beautify-lint 'lib/**/*.js' 'hot/**/*.js' 'bin/**/*.js' 'benchmark/*.js' 'test/*.js'",
    "benchmark": "mocha test/*.benchmark.js --harmony -R spec",
    "build:examples": "cd examples && node buildAll.js",
    "cover": "node --harmony ./node_modules/istanbul/lib/cli.js cover -x '**/*.runtime.js' node_modules/mocha/bin/_mocha -- test/*.test.js",
    "cover:min": "node --harmony ./node_modules/.bin/istanbul cover -x '**/*.runtime.js' --report lcovonly node_modules/mocha/bin/_mocha -- test/*.test.js",
    "lint": "eslint lib bin hot buildin test/**/webpack.config.js test/binCases/**/test.js examples/**/webpack.config.js",
    "lint-files": "npm run lint && npm run beautify-lint",
    "nsp": "nsp check --output summary",
    "pretest": "npm run lint-files",
    "publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish",
    "test": "mocha test/*.test.js --harmony --check-leaks",
    "travis:benchmark": "npm run benchmark",
    "travis:lint": "npm run lint-files && npm run nsp",
    "travis:test": "npm run cover:min"
  },
  "version": "2.3.3",
  "web": "lib/webpack.web.js"
}

EDIT: I've come with following solution in the end: Add this to your package.json file

  "scripts" : {
  "build" : "webpack ./entry.js bundle.js"
  }

and then type npm run build this will still run the local version because npm will first look in ./node_modules/.bin/

Answer 1

That kind of path is what is used in a git for Windows bash.
See this issue

We use cmdr (http://cmder.net/ ) to emulate console on Windows machines.
Still we had to modify scripts and separate build to clean and build tasks to get it working.

"scripts": {
    "clean": "rm -rf dist",
    "build": "node_modules/.bin/babel-node -- ./node_modules/webpack/bin/webpack.js --stats --config  ./webpack/prod.config.js",
    ...
},

You can see a similar instruction in this project package.json:

"build-main": "cross-env NODE_ENV=production node -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.electron.js --progress --profile --colors",