La commande webpack ne fonctionne pas

Question

Je suis nouveau dans Node Js et Webpack. J'ai essayé de démarrer un projet avec des chargeurs de modules.

Tout d'abord, j'ai installé nodeJs et NPM et créé un nouveau répertoire appelé tutorial . J'ai utilisé l'invite de commande pour accéder à ce répertoire, puis j'ai exécuté la commande suivante npm init et ensuite installé webpack via npm en utilisant la commande ci-dessous :

npm install -S webpack

La première commande a installé webpack localement dans le projet sous le répertoire 'node-modules' et je peux exécuter mon projet en faisant cela :

nodejs node-modules/webpack/bin/webpack.js

Le problème, c'est que je dois placer mes webpack.config.js à l'intérieur de ce répertoire que je veux placer dans mon projet Root.

Une solution à ce problème était d'installer webpack globalement sur ma machine ce que j'ai fait en utilisant la commande ci-dessous :

npm install -g webpack

Webpack a été installé et j'ai maintenant une commande Webpack. Cependant, cette commande ne semble pas fonctionner ou faire quoi que ce soit. Lorsque j'essaie de l'exécuter à partir de la commande racine de mon projet, elle ne fait rien du tout (voir la capture d'écran).

S'il vous plaît, dites-moi ce que je fais mal !

Answer 1

webpack n'est pas seulement dans votre node-modules/webpack/bin/ il est également lié dans le répertoire node_modules/.bin .

Vous avez le npm bin pour obtenir le dossier où npm installera les exécutables.

Vous pouvez utiliser le scripts propriété de votre package.json pour utiliser webpack à partir de ce répertoire qui sera exporté.

"scripts": {
  "scriptName": "webpack --config etc..."
}

Par exemple :

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Vous pouvez alors l'exécuter avec :

npm run build

Ou même avec des arguments :

npm run build -- <args>

Cela vous permet d'avoir webpack.config.js dans le dossier racine de votre projet sans avoir installé webpack de manière globale ou avoir votre configuration webpack dans le répertoire node_modules dossier.

Answer 2

J'ai dû réinstaller webpack pour le faire fonctionner avec ma version locale de webpack, par ex :

$ npm uninstall webpack
$ npm i -D webpack

Answer 3

npm i webpack -g

installe webpack globalement sur votre système, ce qui le rend disponible dans la fenêtre du terminal.

Answer 4

Le moyen le plus rapide, pour que cela fonctionne, est d'utiliser le pack web à partir d'un autre emplacement, ce qui vous évitera d'avoir à l'installer de manière globale ou si le pack web n'est pas installé. npm run webpack échoue.

Lorsque vous installez webpack avec npm, il est placé dans le répertoire " node_modules\.bin "de votre projet.

dans l'invite de commande (en tant qu'administrateur)

1. allez à l'emplacement du projet où se trouve votre webpack.config.js.
2. dans l'invite de commande, écrivez ce qui suit

"C:\Users\..\ProjectName\node_modules\.bin\webpack" --config webpack.config.vendor.js

Answer 5

L'installation de webpack avec l'option -g installe webpack dans un dossier dans

C:\Users\ <.profilusername.> \AppData\Roaming\npm\node_modules

même chose avec webpack-cli et webpack-dev-server

En dehors du module global node_modules, un lien est créé pour que webpack puisse être exécuté en ligne de commande.

C:\Users\ <.profilusername.> \AppData\Roaming\npm

pour que cela fonctionne localement, j'ai fait ce qui suit

1. renommé le dossier webpack dans global node_modules en _old
2. installé webpack localement dans le projet
3. J'ai modifié le lien de commande webpack.cmd et j'ai fait en sorte que le webpack.js regarde dans mon dossier node_modules local dans mon application.

Le problème avec cette approche est que vous devez maintenir des liens pour chaque projet que vous avez. Il n'y a pas d'autre moyen puisque vous utilisez l'éditeur de ligne de commande pour exécuter la commande webpack lors de l'installation avec une option -g.

Donc, si vous avez proj1, proj2 et proj3, tous avec leurs node_modules locaux et webpack local installé( sans utiliser -g lors de l'installation), alors vous devrez créer des noms de liens non génériques au lieu de simplement webpack.

L'exemple ici serait de créer webpack_proj1.cmd, webpack_proj2.cmd et webpack_proj3.cmd et dans chaque cmd suivez les points 2 et 3 ci-dessus

PS : n'oubliez pas de mettre à jour votre package.json avec ces changements, sinon vous obtiendrez des erreurs car il ne trouvera pas la commande webpack.