web-dev-qa-db-fra.com

Problèmes de démarrage avec webpack 4

Je suis le tutoriel exactement comme donné ici . Mais je suis surpris que la documentation semble obsolète. par exemple

npx webpack src/index.js dist/bundle.js échoue avec:

La CLI est passée dans un paquet séparé: webpack-cli. Se il vous plaît installer 'webpack-cli' en plus de Webpack lui-même pour utiliser la CLI . -> Si vous utilisez npm: npm, installez webpack-cli -D -> Si vous utilisez du fil: ajoutez du fil webpack-cli -D

Si j'installe webpack-cli et que j'essaye encore, je vois cette erreur:

Hachage: af9bc06fd641eb0ffd1e Version: webpack 4.0.0 Temps: 3865ms Construit at: 2018-2-26 05:10:45 1 atout Entrypoint main = main.js 1 (webpack) /buildin/module.js 519 octets {0} [construit] 2 (webpack) /buildin/global.js 509 octets {0} [construit] [3] ./src/index.js 212 octets {0} [construit] [4] multi ./src/index.js dist/bundle.js 40 octets {0} [construit] + 1 module caché

AVERTISSEMENT dans la configuration L'option 'mode' n'a pas été définie. Ensemble Option 'mode' en 'développement' ou 'production' pour activer les valeurs par défaut pour cet environnement. 

ERREUR dans plusieurs ./src/index.js dist/bundle.js Module introuvable: erreur: Impossible de résoudre 'dist/bundle.js' dans '/ var/app/webpack_demo' @ multi ./src/index.js dist/bundle.js

J'espère que je ne fais pas quelque chose de fou, étant donné la popularité de Webpack, la documentation devrait refléter le comportement réel. Faites-moi savoir si je fais quelque chose de mal.

Modifier

Une description détaillée de la mise à niveau vers webpack 4 , qui pourrait être utile 

node.jswebpackwebpack-4
23
sakhunzai

Vous pouvez passer mode param dans la commande webpack config ou cli.

Config: mode: 'development' ou mode: 'production'

CLI: webpack --mode development ou webpack --mode production

33
Iurii Budnikov

L’équipe Webpack s’emploie à mettre à jour le package docs dès que possible. De nouveaux guides et documents sont disponibles sur le site officiel webpack.js.org .

Pendant ce temps, Vous pouvez également lire les articles sur le média:

Vérifiez sur GitHub ce Webpack-Demo projet destiné à être un didacticiel Webpack 4 . Des liens vers des ressources utiles utilisées dans les configurations Webpack sont inclus dans le Readme..__ du projet. .Il a deux versions zéro-config (en utilisant la nouvelle option webpack mode qui inclut un ensemble de valeurs par défaut), et deux autres en utilisant des configurations personnalisées.

Depuis webpack-4 , l'interface de ligne de commande a été déplacée vers webpack-cli; vous devez donc également installer ce package dans votre devDependencies. De plus, webpack attendez que la nouvelle configuration mode soit définie. soit sur le CLI ou l'objet config.

Utilisation de la CLI dans vos scripts npm:

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

Définissez la propriété mode dans votre objet config webpack:

{
    mode: 'production' // | 'development' | 'none'
}

Si la valeur de mode n'est pas spécifiée, Webpack utilise la valeur production (option par défaut). Mais vous avertit dans la sortie avec:

AVERTISSEMENT en configuration

L'option 'mode' n'a pas été définie. Définissez l'option 'mode' sur 'développement' ou 'production' pour activer les valeurs par défaut pour cet environnement.

Webpack mode réduit la configuration requise pour une construction utile en utilisant un ensemble de valeurs par défaut (valeurs par défaut pour les propriétés de configuration dépendant de la valeur mode):

  • production permet à tout type d'optimisation de générer des ensembles optimisés
  • development permet des messages d'erreur utiles et est optimisé pour la vitesse
  • none est un mode caché qui désactive tout

En savoir plus sur notes de publication et journal des modifications

7
Carloluis

Il sera mis à jour très bientôt, voir this link for information

Nous sommes sur le point de terminer le Guide de migration et les ajouts de documents v4! Pour suivre les progrès ou donner un coup de main, arrêtez-vous à notre référentiel de documentation, consultez la prochaine branche et aidez-nous!

4
C.N

Vous avez le même problème et après quelques recherches, vous avez trouvé un problème à résoudre, comme vous pouvez le voir sur ce fil Github }

Une des options: 

Dans package.json } _, définissez scripts sur le mode development ou production

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Et maintenant, lorsque vous exécuterez npm run dev, il vous donnera bundle.js mais non minifié.

Mais lorsque vous exécutez npm run build, vous obtiendrez un bundle minified

4
Aaqib

Les documents Webpack 4 ne sont pas encore prêts. J'ai récemment migré du Webpack 3 à 4 et il m'a fallu un certain temps pour comprendre tous les problèmes. 

Voici mon exemple de dépôt que vous pouvez utiliser comme référence pour migrer de Webpack 3 à 4.

https://github.com/flexdinesh/react-redux-boilerplate

Il y a un commit spécifique pour la migration. Jetez un oeil à cela pour plus d'informations.

1
Dinesh Pandiyan