无法启动webpack / webpack

时间:2017-11-09 21:09:28

标签: javascript node.js npm webpack

我想开始使用webpack。我输入这个命令

npm run dev

在我的项目所在的命令shell中以及node_modules所在的位置。 我在终端中收到此错误:

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

[3;J




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

我查看了node_modules / bin /,并且有一个名为webpack的文件。有人能帮助我吗?我是stackoverflow的新手,也是使用webpack的新手。

打包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
  }
}

2 个答案:

答案 0 :(得分:2)

节点项目中webpack的正确路径为BigInteger

在npm脚本中,您可以访问所有节点模块,就好像它们在PATH上一样,所以您需要这样:

./node_modules/.bin/wepback

请注意,webpack不需要package.json

中的文件夹范围

编辑: 或者使其与构建脚本保持一致:

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

答案 1 :(得分:1)

运行package.json中定义的NPM脚本时,无需在.\node_modules\.bin文件夹中指定可执行文件的相对路径。在您的情况下,这意味着替换所有出现的:

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

只有:

webpack

这将确保您的NPM脚本能够正确解析可执行文件。