👃🏿 🏂🏽 🤘🏻 Configurer Webpack 5 à partir de zéro 🐃 👩🏽‍🏭 🐇

Apprenez à utiliser le webpack pour créer du JavaScript, des images, des polices et des styles, et comment exécuter le

serveur de développement.Si vous avez déjà utilisé webpack 4, voici quelques-unes des différences par rapport à la version 5:

la commande "webpack-dev-server" ressemble maintenant à "webpack-serve"
l'installation séparée du chargeur de fichiers, du chargeur brut et du chargeur d'url n'est plus nécessaire, vous pouvez utiliser les modules d'actifs intégrés
Node.js , , , stream, «stream-browserify» { stream: «stream-browserify» }

?

Pour la plupart, les sites ne sont plus écrits en HTML pur avec peu de JavaScript - souvent ils ne sont construits qu'avec JavaScript. Par conséquent, il devient nécessaire de construire, de réduire et de transpiler le code. C'est là que webpack est utile.

Webpack est un constructeur de modules. Il est utilisé pour empaqueter le code à utiliser par le navigateur. Il vous permet de profiter des dernières fonctionnalités JavaScript avec Babel, ou d'utiliser TypeScript et de le compiler en code minifié multi-navigateurs. Il vous permet également d'importer des ressources statiques dans JavaScript.

Pour les développeurs, le webpack fournit également un serveur de développement qui peut mettre à jour les modules et les styles à la volée lorsque le fichier est enregistré. Les outils de ligne de commande tels que "vue create" et "react-create-app" utilisent le webpack dans les coulisses, mais vous pouvez facilement créer votre propre configuration webpack pour ces frameworks.

Webpack peut également faire beaucoup d'autres choses, mais cet article couvrira les bases de sa configuration et de son utilisation.

Installation

Créez un répertoire de projet et initialisez-le:

mkdir webpack-tutorial
cd !$
// 
cd webpack-tutorial
yarn init -yp  //     "package.json"
// 
npm init -y

Installez webpack et webpack-cli en tant que dépendances de développement:

yarn add -D webpack webpack-cli
// 
npm i -D webpack webpack-cli

webpack - collecteur de modules et de ressources
webpack-cli - interface de ligne de commande webpack

Créez un répertoire "src" pour stocker les fichiers d'application. Je vais commencer par créer un simple fichier "index.js":

console.log(" !")

Super, nous avons un projet Node.js avec les principaux packages installés et un fichier "index.js". Commençons par configurer le webpack.

Configuration de base

Commençons par configurer le collecteur. Créez un fichier "webpack.config.js" dans le répertoire racine du projet.

Point d'entrée

Tout d'abord, vous devez définir le point d'entrée de l'application, c'est-à-dire quels fichiers le webpack compilera. Dans l'exemple ci-dessus, nous définissons le point d'entrée comme "src / index.js":

// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}

Point de sortie

Le point de sortie est le répertoire où sont placés les fichiers compilés par le webpack. Définissons le point de sortie sur "dist". Le préfixe "[nom]" correspond au nom de fichier dans src:

// webpack.config.js
module.exports = {
    // ...

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}

La configuration minimale pour la construction du projet est prête. Ajoutez le script "build" au fichier "package.json" qui exécute la commande "webpack":

// package.json
"scripts": {
    "build": "webpack"
}

Lancez le webpack:

yarn build
// 
npm run build

asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss

Le fichier «index.bundle.js» est créé dans le répertoire «dist». Le fichier n'a pas changé, mais nous avons réussi à construire le projet.

Plugins

L'interface du plugin rend le webpack très flexible. Les plugins sont utilisés à la fois par le webpack lui-même et par des extensions tierces. Certains plugins sont utilisés dans presque tous les projets.

Plugin basé sur un modèle HTML

Nous avons un assemblage prêt à l'emploi, mais il est inutile sans balisage, qui chargera l'assemblage en tant que script. Puisque nous voulons qu'un tel fichier HTML soit généré automatiquement, nous utilisons le html-webpack-plugin.

html-webpack-plugin - Crée un fichier HTML basé sur un modèle

Installez le plugin:

yarn add -D html-webpack-plugin

Créez un fichier "template.html" dans le répertoire "src". Nous pouvons ajouter des variables et d'autres informations au modèle. Ajoutez la variable "title", sinon le modèle ressemblera à un fichier HTML normal avec un conteneur avec l'identifiant "root":

<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

Ajoutez la propriété "plugins" aux paramètres du webpack, où nous définissons le plugin, le nom du fichier de sortie (index.html) et le modèle:

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // 
            filename: 'index.html', //   
        }),
    ],
}

Nous commençons l'assemblage. Le répertoire "dist" contient maintenant le fichier "index.html" avec le script inclus. Cool! Si vous ouvrez ce fichier dans un navigateur, vous verrez le message "Comme c'est intéressant!" dans la console.

Ajoutons du contenu au DOM. Changeons le contenu du fichier "index.js" et redémarrons l'assemblage.

// index.js
//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//    DOM
const root = document.querySelector('#root')
root.append(heading)

Allez dans le répertoire "dist" et démarrez le serveur (pour cela, vous devez installer globalement http-server : yarn global add http-server ou npm i -g http-server).

http-server

Dans l'onglet du navigateur qui s'ouvre, vous devriez voir un en-tête qui dit "Comme c'est intéressant!" Notez également la réduction de la taille du fichier.

Nettoyage

Installez le plugin clean-webpack, qui nettoie le répertoire "dist" à chaque fois que le projet est construit. Cela vous permet de supprimer automatiquement les anciens fichiers dont vous n'avez plus besoin.

clean-webpack-plugin - supprime / nettoie le répertoire de construction du projet

// webpack.config.js
const HtmlWebpackPlugin = require('html=webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        // ...
        new CleanWebpackPlugin(),
    ],
}

Modules et chargeurs

Le webpack utilise des chargeurs pour analyser les fichiers chargés par les modules . Il peut s'agir de fichiers JavaScript, de ressources statiques telles que des images ou des styles, et des compilateurs tels que TypeScript et Babel. Webpack 5 possède plusieurs chargeurs de ressources intégrés.

Notre projet a un fichier HTML qui charge un script, mais il ne fait rien d'autre. Pensons à ce que nous attendons du collectionneur?

Compilez les dernières fonctionnalités JavaScript dans un code compatible avec tous ou la plupart des navigateurs
Importation de styles et conversion de SCSS en CSS
Importation d'images et de polices
Personnalisation de React ou Vue (facultatif)

Tout d'abord, configurons Babel pour compiler JavaScript.

Babel (JavaScript)

Babel est un outil pour activer le futur JavaScript aujourd'hui.

Nous allons définir une règle selon laquelle tous les fichiers js d'un projet (à l'exception des fichiers contenus dans le répertoire node_modules) seront transpilés à l'aide de babel-loader. Babel nécessite plusieurs dépendances pour fonctionner:

babel-loader - transpilage de fichiers avec Babel et webpack
@ babel / core - transpiling ES2015 + en JavaScript rétrocompatible
@ babel / preset-env - préréglages Babel par défaut utiles
@ babel / plugin-proposal-class-properties - un exemple de configuration Babel personnalisée (définition des propriétés d'instance dans le corps de la classe, pas dans son constructeur)

yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    }
}

Si vous configurez un projet TypeScript, vous devez utiliser typescript-loader au lieu de babel-loader pour tous les fichiers JavaScript nécessitant une transpilation. Vous vérifiez les fichiers avec l'extension "ts" et utilisez le ts-loader.

Donc Babel est installé, mais le plugin n'est pas encore là. Vous pouvez vérifier cela en ajoutant le code suivant en haut de index.js:

// index.js
//     
class Game {
    name = 'Violin Charades'
}
const myGame = new Game()

//  
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//      DOM
const root = document.querySelector('#root')
root.append(heading, p)

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }

Pour résoudre ce problème, créez un fichier ".babelrc" à la racine du projet:

// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Nous commençons la construction avec la construction de fil. Tout fonctionne maintenant.

Images

Nous voulons importer des images dans un fichier JavaScript, mais JavaScript ne peut pas le faire. Pour vous en assurer, créez un répertoire "src / images", mettez-y une image et essayez de l'importer dans le fichier "index.js":

// index.js
import example from './images/example.png'

// ...

Lors du démarrage de la construction, une exception sera levée:

ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Comme indiqué précédemment, le Webpack possède des téléchargeurs intégrés pour gérer les fichiers statiques. Pour les images, utilisez le type "actif / ressource". Veuillez noter que nous parlons du type (type), et non du chargeur (chargeur):

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // 
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
}

Un nouveau fichier apparaît dans le répertoire "dist".

Polices et autres données intégrées

Le webpack dispose également d'un module intégré pour gérer certaines données intégrées telles que les polices et SVG. Pour ce faire, il suffit de spécifier le type "asset / inline":

// index.js
import example from './images/example.svg'

// ...

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            //   SVG
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
}

modes

L'utilisation de chargeurs de style est une condition préalable à l'utilisation de chaînes telles que "import 'file.css'" dans votre script.

De nombreuses personnes utilisent CSS-in-JS , des composants stylisés et d'autres outils qui permettent à JavaScript de styliser.

Parfois, nous pouvons nous limiter au chargement d'un seul fichier CSS. Mais peut-être souhaitez-vous utiliser PostCSS , qui permet les dernières fonctionnalités CSS du navigateur. Ou voulez-vous utiliser le préprocesseur Sass .

Je veux utiliser les trois - écrire du code dans Sass, le traiter avec PostCSS et le compiler en CSS.

sass-loader - Charge SCSS et le compile en CSS
node-sass - Nœud Sass
postcss-loader - traitement CSS avec PostCSS
postcss-preset-env - paramètres PostCSS utiles
css-loader - styles de chargement
style-loader - application de styles aux éléments DOM

yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass

Comme avec Babel, PostCSS nécessite un fichier de configuration séparé:

// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}

Pour tester la fonctionnalité des outils nommés, créons un fichier "src / styles / main.scss" contenant des variables Sass et un exemple d'utilisation de PostCSS (lch):

// src/styles/main.css
$font-size: 1rem;
$font-color: lch(53 105 40);

html {
    font-size: $font-size;
    color: $font-color;
}

Nous importons ce fichier dans index.js et ajoutons 4 chargeurs. Les chargeurs sont utilisés par le webpack de droite à gauche, donc le dernier devrait être sass-loader, puis PostCSS, puis CSS, et enfin style-loader, qui applique les styles compilés aux éléments DOM:

// index.js
import './styles/main.css'

// ...

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
}

Une fois construit, vous remarquerez que Sass et PostCSS se sont appliqués au DOM.

Veuillez noter que nous avons défini les préférences pour le mode de développement. Pour la production, utilisez MiniCssExtractPlugin au lieu de style-loader, qui exporte du CSS minifié.

Développement de

Taper yarn build (npm run build) à chaque fois pour reconstruire le projet peut être fastidieux. Plus le projet est grand, plus sa construction prendra du temps. Par conséquent, vous devez disposer de deux fichiers de configuration Webpack:

Paramètres de production, y compris la minification, l'optimisation et la suppression de toutes les cartes de ressources (cartes sources)
Paramètres de développement, y compris le démarrage du serveur, la mise à jour à chaque changement et les cartes de ressources

Au lieu de créer un répertoire "dist", le mode développement peut s'attendre à stocker les informations dont vous avez besoin en mémoire.

Pour ce faire, vous devez installer webpack-dev-server.

webpack-dev-server est un serveur de développement

yarn add -D webpack-dev-server

Afin de montrer comment utiliser un serveur pour le développement, nous pouvons définir les paramètres appropriés dans le fichier "webpack.config.js". En pratique, il est préférable d'avoir deux fichiers de configuration, l'un avec mode: production et l'autre avec mode: development. Dans le passe- partout Webpack 5 spécialement préparé pour vous, j'utilise webpack-merge pour obtenir les paramètres de base dans un seul fichier, et les exigences spéciales sont contenues dans les fichiers "webpack.prod.js" et "webpack.dev.js".

// webpack.config.js
const webpack = require('webpack')

module.exports = {
    // ...
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        // ...
        //      
        new webpack.HotModuleReplacement(),
    ],
}

Nous avons ajouté un mode: développement et une propriété "devServer". Cette propriété contient plusieurs paramètres standard - numéro de port (8080), ouverture automatique du navigateur, utilisation du remplacement de module à chaud , ce qui nécessite webpack.HotModuleReplacement (). Cela permettra aux modules de se mettre à jour sans recharger une page complète, c.-à-d. si les styles individuels changent, seulement ils sont mis à jour, vous n'avez pas besoin de recharger JavaScript, ce qui accélère considérablement le développement.

Pour démarrer le serveur, utilisez la commande "webpack serve":

// package.json
"scripts": {
    "start": "webpack serve"
}

yarn start

Après avoir exécuté cette commande, le navigateur s'ouvre à localhost: 8080. Vous pouvez maintenant modifier Sass et JavaScript et ils se mettront à jour à la volée.

Conclusion

J'espère que cet article vous a aidé à démarrer avec webpack. Pour faciliter la résolution de vos tâches quotidiennes, j'ai développé un passe- partout webpack 5 avec Babel, Sass, PostCss, une optimisation pour la production et un serveur pour le développement. En prenant cela comme base, vous pouvez facilement configurer votre pack Web pour qu'il fonctionne avec React, Vue ou TypeScript.

Configurer Webpack 5 à partir de zéro

?