Webpack : faites fonctionner votre module

Courez plus intelligemment, pas plus fort

Lorsque nous avons commencé à configurer le fichier package.json de webpack, nous avons défini un seul script de construction appelé « common ».

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

Pour exécuter ce build, dans le terminal, nous utilisons la commande suivante :

webpack run common

Nous voulons les meilleures performances lors du développement de notre projet, en réduisant le temps nécessaire à chaque construction. Nous souhaitons également obtenir des outils de débogage supplémentaires utiles tels que des cartes source pour nos Sass, CSS et JS. Et enfin, lorsque nous sommes prêts à produire du code pour une utilisation en production, nous voulons généralement que tout soit aussi propre et compact que possible. Alors, comment tirer le meilleur parti des deux mondes sans modifier manuellement notre configuration ?

Tout d’abord, nous voulons identifier les parties de notre fichier de configuration que nous voulons ou devons conserver à la fois pour une version de développement et de production. Cela deviendra le fichier de configuration de base, puis toutes les différences entre dev ou prod seront conservées dans des fichiers séparés. Tout ce dont nous avons besoin après cela, c’est d’un moyen de combiner les fichiers de configuration prod+common ou dev+common dans chaque build.
Comme on dit, il y a un plugin pour ça.

Plugin de fusion Webpack

Préparons ce nouveau plugin à l’emploi.

Installez comme d’habitude en utilisant npm dans le terminal pour ajouter aux « devDependencies » de notre package.json.

     npm install webpack-merge --save-dev

Exemple de résultat dans package.json

"devDependencies": {
    ... (other installed items),
    "webpack-merge": "^5.8.0"
}

Ensuite, nous séparerons nos fichiers de construction Dev et Prod. Faites deux copies de notre webpack.common.config.js original et nommez-en une webpack.dev.config.js et l’autre webpack.prod.config.js. Alors maintenant, il y a trois fichiers de configuration au total.

Puisque nous avons renommé et ajouté nos fichiers de configuration, modifiez package.json comme suit car nous n’exécuterons plus common par lui-même.

"scripts" : {
     "dev" : "webpack --config webpack.dev.config.js",
     "prod" : "webpack --config webpack.prod.config.js"
}

Comme avant, lorsque nous voulons exécuter l’un ou l’autre, nous utiliserons la convention de commande dans le terminal :

webpack run [prod or dev]

Modification des fichiers Dev et Prod Config

La principale différence entre chaque fichier de configuration sera le mode utilisé. Par défaut, certains comportements de construction sont invoqués automatiquement par webpack en fonction de ce paramètre de propriété. Différentes versions de Webpack modifieront ces valeurs par défaut, car les plugins éprouvés ont tendance à être ajoutés dans les versions ultérieures, vous n’avez donc pas à vous soucier de les installer. Consultez la documentation de votre version de webpack pour tout comportement de mode par défaut https://webpack.js.org/configuration/mode/ actuellement la version 5.x.

Remarque complémentaire : Le mode peut également être défini sur « aucun » pour contourner les optimisations par défaut et, s’il n’est pas défini du tout, il est défini par défaut sur « production ».

module.exports = {
     ... (other settings),
     mode: 'production' (in webpack.prod.config.js)
     mode: 'development' (in webpack.dev.config.js)
}

Une fois que nous avons nos deux fichiers et défini le mode, la prochaine chose est de décider quels plugins sont encore nécessaires. Par exemple, MiniCSSExtractPlugin peut ne pas être nécessaire si vous n’injectez pas de balises