Configuration de production
Bien que le webpack se veut un outil efficace, il a cependant besoin d'être pour sa configuration de mise en production d'un site ou d'une application.
Installer
Les objectifs de développement et de production diffèrent considérablement. En développement, nous voulons un cartographie de source solide et un serveur localhost avec un rechargement en direct ou un remplacement de module à chaud. En production, nos objectifs se concentrent sur des ensembles minifiés, des cartographies sources plus légères et des ressources optimisées pour améliorer le temps de chargement. Avec cette séparation logique à portée de main, il est généralement recommandé d'écrire des configurations webpack distinctes pour chaque environnement.
Bien qu'il y a une séparations des éléments spécifiques à la production et au développement, notez qu'il y a toujours le maintiens d'une configuration commune pour garder les choses sec. Afin de fusionner ces configurations ensemble, le webpack utilisera un utilitaire appelé webpack-merge. Avec la configuration commune en place, il n'aurait pas à dupliquer le code dans les configurations spécifiques à l'environnement.
Commençons par installer webpack-merge et diviser les bits sur lesquels vous avez déjà travaillé :
| npm install --save-dev webpack-merge |
Prenons par exemple le projet suivant :
|
webpack-demo |- package.json - |- webpack.config.js + |- webpack.common.js + |- webpack.dev.js + |- webpack.prod.js |- /dist |- /src |- index.js |- math.js |- /node_modules |
Voici le contenu de fichier webpack.common.js en commun :
- const path = require("path");
- const HtmlWebpackPlugin = require("html-webpack-plugin");
-
- module.exports = {
- entry: {
- app: "./src/index.js",
- },
- plugins: [
- new HtmlWebpackPlugin({
- title: "Production",
- }),
- ],
- output: {
- filename: "[name].bundle.js",
- path: path.resolve(__dirname, 'dist'),
- clean: true,
- },
- };
Voici le contenu de fichier webpack.dev.js de développement :
- const { merge } = require("webpack-merge");
- const common = require("./webpack.common.js");
-
- module.exports = merge(common, {
- mode: "development",
- devtool: "inline-source-map",
- devServer: {
- contentBase: "./dist",
- },
- });
Voici le contenu de fichier webpack.prod.js de production :
- const { merge } = require("webpack-merge");
- const common = require("./webpack.common.js");
-
- module.exports = merge(common, {
- mode: "production",
- });
Dans webpack.common.js, nous avons maintenant configuré notre configuration d'entrée et de sortie et nous avons inclus tous les plugiciels requis pour les deux environnements. Dans le webpack.dev.js, nous avons défini le mode sur le développement. De plus, nous avons ajouté le devtool recommandé pour cet environnement (cartographie de source fort), ainsi que notre configuration simple devServer. Enfin, dans webpack.prod.js, le mode est défini sur production, ce qui charge TerserPlugin.
Notez l'utilisation des appels merge() dans les configurations spécifiques à l'environnement pour inclure notre configuration commune dans webpack.dev.js et webpack.prod.js. L'outil webpack-merge offre une variété de fonctionnalités avancées pour la fusion.
Scripts NPM
Maintenant, modifions vos scripts npm pour utiliser les nouveaux fichiers de configuration. Pour le script de démarrage, exécutant webpack-dev-server, on utilise webpack.dev.js, et pour le script de construction, exécutant webpack pour créer une version de production, on utilise webpack.prod.js. Voici le package.json :
- {
- "name": "development",
- "version": "1.0.0",
- "description": "",
- "main": "src/index.js",
- "scripts": {
- /* "start":"webpack serve --open", Ligne enlever */
- "start": "webpack serve --open --config webpack.dev.js", /* Ligne ajouter */
- /* "build": "webpack" Ligne enlever */
- "build": "webpack --config webpack.prod.js" /* Ligne ajouter */
- },
- "keywords": [],
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "css-loader": "^0.28.4",
- "csv-loader": "^2.1.1",
- "express": "^4.15.3",
- "file-loader": "^0.11.2",
- "html-webpack-plugin": "^2.29.0",
- "style-loader": "^0.18.2",
- "webpack": "^4.30.0",
- "webpack-dev-middleware": "^1.12.0",
- "webpack-dev-server": "^2.9.1",
- "webpack-merge": "^4.1.0",
- "xml-loader": "^1.2.1"
- }
- }
N'hésitez pas à exécuter ces scripts et à voir comment la sortie change à mesure que nous continuons à ajouter à notre configuration de production.
Spécifiez le mode
De nombreuses bibliothèques saisissent la variable process.env.NODE_ENV pour déterminer ce qui doit être inclus dans la bibliothèque. Par exemple, lorsque process.env.NODE_ENV n'est pas défini sur «production», certaines bibliothèques peuvent ajouter une journalisation et des tests supplémentaires pour faciliter le débogage. Cependant, avec process.env.NODE_ENV défini sur 'production', ils peuvent supprimer ou ajouter des portions importantes de code pour optimiser la façon dont les choses fonctionnent pour vos utilisateurs réels. Depuis webpack v4, la spécification du mode configure automatiquement DefinePlugin est le suivant pour webpack.prod.js :
- const { merge } = require("webpack-merge");
- const common = require("./webpack.common.js");
-
- module.exports = merge(common, {
- mode: "production",
- });
- Techniquement, NODE_ENV est une variable d'environnement système que Node.js expose dans les scripts en cours d'exécution. Il est utilisé par convention pour déterminer le comportement dev-vs-prod par les outils serveur, les scripts de construction et les bibliothèques côté client. Contrairement aux attentes, process.env.NODE_ENV n'est pas défini sur 'production' dans le script de construction webpack.config.js. Ainsi, des conditions comme process.env.NODE_ENV === 'production' ? '[name].[contenthash].bundle.js' : '[name].bundle.js' dans les configurations webpack ne fonctionne pas comme prévu.
Si vous utilisez une bibliothèque comme react, vous devriez en fait constater une baisse significative de la taille du bundle après l'ajout de DefinePlugin. Notez également que n'importe lequel de nos codes locaux /src peut également le désactiver, de sorte que la vérification suivante serait valide (src/index.js) :
- import { cube } from "./math.js";
-
- if (process.env.NODE_ENV !== "production") {
- console.log("On dirait que nous sommes en mode développement!");
- }
-
- function component() {
- const element = document.createElement("pre");
-
- element.innerHTML = [
- "Bonjour webpack!",
- "5 cubes est égal à " + cube(5)
- ].join("\n\n");
-
- return element;
- }
-
- document.body.appendChild(component());
Minification
Le webpack v4+ réduira votre code par défaut en mode production. Notez que si TerserPlugin est un excellent point de départ pour la minification et est utilisé par défaut, il existe d'autres options : ClosureWebpackPlugin.