Git Bash 和 webpack

Question

Git Bash 和 webpack

3

大家好，我正在学习 Webpack。我一直在跟随一些教程，但遇到了一些问题。我已经通过 npm install webpack --save-dev 命令在本地文件夹中安装了 webpack。我创建了两个 JS 脚本，并希望将它们捆绑在一起。我尝试在 WindowsPowerShell 中使用以下命令：webpack script-1.js /.bundle.js（我使用的是 Windows 7），但出现了以下错误：

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

因此，我全局安装了 webpack。当我在 PowerShell 中以管理员身份运行相同的命令时，它生成了 bundle.js 文件，但不是在我工作的目录中，而是在 C: 中。
在这次失败后，我决定尝试使用 git bash。首先，我尝试了这个命令：webpack script-1.js /.bundle.js，但出现了以下错误：

bash: webpack: command not found

最后，在尝试了一些方法后，我成功地在 git bash 中使用以下命令：node_modules/.bin/webpack ./script-1.js bundle.js
有没有办法修复这个问题，让我只需输入 webpack 而不是整个路径？还有，有没有办法在 PowerShell 中修复路径？

这是我的 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"
  }
}

这是位于node_modules/webpack/package.json的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": "webpack@2.3.3",
  "_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": "tobias.koppers@googlemail.com"
  },
  "_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": "mail@johannesewald.de"
    },
    {
      "name": "sokra",
      "email": "tobias.koppers@googlemail.com"
    },
    {
      "name": "thelarkinn",
      "email": "sean.larkin@cuw.edu"
    }
  ],
  "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"
}

编辑：最终我找到了以下解决方案：将以下内容添加到您的package.json文件中

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

然后输入npm run build，这仍将运行本地版本，因为npm首先会查找./node_modules/.bin/

- Zvezdas1989

如果它在 node_modules/.bin 中，那么这听起来像是本地安装了 webpack 而不是全局安装。也许可以尝试使用 npm install -g webpack 再次安装？ - Trott

@Trott 首先我在本地安装了它，但因为它无法正常工作，所以我全局安装了它。然后它在PowerShell中工作了，但输出在C:而不是我的工作文件夹中，所以我尝试使用git bash并在本地工作，但我必须使用整个命令路径，而不仅仅是使用webpack script-1.js/.bundle.js。目前我已经在我正在使用的文件夹和全局中都安装了webpack。 - Zvezdas1989

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VonC · Accepted Answer

那种路径是在 Windows 版本的 git bash 中使用的。
请参见 this issue。

我们使用 cmdr（http://cmder.net/）来模拟 Windows 上的控制台。
不过，我们还需要修改脚本并分离构建操作以进行清理和构建任务，并使其正常工作。

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

您可以在此项目的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",