大家好,我正在学习 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/
node_modules/.bin
中,那么这听起来像是本地安装了webpack
而不是全局安装。也许可以尝试使用npm install -g webpack
再次安装? - Trott