2017-04-06 21 views
1

こんにちは、私はWebpackを学びたいと思っています。私はいくつかのチュートリアルを続けてきました。私はnpm install webpack --save-devで作業しているフォルダにwebpackをローカルにインストールしました。私は2つのJSスクリプトを作ったので、それらをバンドルしたいと思いました.WindowsPowerShellでコマンドwebpack script-1.js /.bundle.jsを実行しようとしました(Windows 7を使用しています)。さて、これはGit Bashとwebpack

のWebPACKは

だから、私はグローバルのWebPACKをインストールし、内部または外部コマンド操作可能なプログラムまたはバッチファイルとして認識されていない次のエラーをした、と私は(PowerShellで同じコマンドを使用する場合私は管理者としてオープンしました)、bundle.jsファイルを作成しましたが、作業中のディレクトリではありませんでしたが、C:
これでgit bashを試してみました。まず私は、このコマンドwebpack script-1.js /.bundle.jsを試してみましたが、次のエラーに

bashの持っている:WebPACKの:いくつかしようと、私はそれがの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" 
    } 
} 

であり、これはpackage.json /のWebPACK/package.json

node_modulesに位置しています
{ 
    "_args": [ 
    [ 
     { 
     "raw": "webpack", 
     "scope": null, 
     "escapedName": "webpack", 
     "name": "webpack", 
     "rawSpec": "", 
     "spec": "latest", 
     "type": "tag" 
     }, 
     "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist" 
    ] 
    ], 
    "_from": "[email protected]", 
    "_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: 私はで解決策を以下に来ています最後: パッケージにこれを追加します。

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

と入力してnpm run buildと入力します.npmが最初に表示されるため、ローカルバージョンが実行されます./node_modules/.bin/

+0

それは 'webpack'がグローバルにローカルではなくインストールされていたように聞こえること、その後' node_modules/.bin'になら。おそらく 'npm install -g webpack'でやり直してください。 – Trott

+0

@Trottまずローカルにインストールしましたが、動作していなかったので全世界にインストールしました。そして、それはPowerShellで働いていましたが、出力はCで動作していました:私のgit bashを試して、ローカルで作業した理由ですが、webpack script-1.js/.bundle.js現時点では、私はwebpackを両方のフォルダにインストールしており、私はグローバルに作業しています。 – Zvezdas1989

答えて

1

git for Windows bashで使用されているパスです。
は、我々は、Windowsマシン上でコンソールをエミュレートするために、CMDR(http://cmder.net/)を使用this issue

を参照してください。
まだスクリプトを修正してビルドを分けて、クリーンアップしてタスクをビルドして機能させる必要がありました。

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

あなたは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", 
+0

あなたが追加したすべてのリンクを数回読んだ後、私は何をすべきかまだ分かりません。私は "build-main:..."をnode_modulesにある私のパッケージjsonに書いたものを追加すると思いますか?また、自分のpackage.jsonを自分の質問に追加したので、あなた自身でそれを見ることができます。 – Zvezdas1989

+0

@ Zvezdas1989そうしたリンクのポイントは明らかに、あなたがこのようなパス( '。/ node_modules/webpack/bin')を使用して指定し、コマンドだけに依存しない(webpack') – VonC

+0

ありがとうございました。それは今働く。 – Zvezdas1989