Analyse de l'utilisation du chargeur de webpack3

Cette fois, je vais vous apporter l'analyse de l'utilisation du chargeur de webpack3. Quelles sont les précautions pour l'analyse de l'utilisation du chargeur dans webpack3. Voici des cas pratiques, jetons un coup d'œil.

Tout d'abord, affichez le site officiel de webpack. Que peut faire webpack ? La réponse donnée par le site officiel est, en une phrase, que tout est simple !

Divers chargeurs apparaissent à l'infini, nous laissant perdus lors de la construction. Nous résumons ici l'analyse complète des chargeurs.

Concept

Loader, comme son nom l'indique, loader, l'explication anglaise est la suivante :

Les chargeurs sont des transformations appliquées au code source d'un module Ils vous permettent de prétraiter les fichiers lors de l’importation ou du « chargement ». Ainsi, les chargeurs sont un peu comme des « tâches » dans d’autres outils de construction, et. fournir un moyen puissant de gérer les étapes de construction frontales. transformer des fichiers d'un langage différent (comme TypeScript) en JavaScript ou des images en ligne sous forme d'URL de données vous permettent même de le faire. des choses comme importer des fichiers CSS directement depuis vos modules JavaScript !

La traduction chinoise est :

Le chargeur est utilisé pour convertir le code source du module. Le chargeur vous permet de pré-traiter les fichiers lors de l'importation ou du "chargement" de modules. Par conséquent, le chargeur Semblable aux « tâches » dans d’autres outils de construction, et fournit un moyen puissant de gérer les étapes de construction frontales. Le chargeur peut charger des fichiers de différentes langues telles que TypeScript) en JavaScript, ou des images en ligne dans des URL de données. le chargeur vous permet même d'utiliser directement JavaScript Importez des fichiers CSS dans le module !

À partir de là, nous pouvons voir le rôle puissant du chargeur. Analysons :

1. . Le rôle de la conversion. Tout ce qui est utilisé dans le développement est converti en fichiers dans les formats requis tels que html+css+js+img, nécessaires au chargement des pages Web.

2. L'objet de conversion est le code source. Le chargeur convertit uniquement le code source. Comme pour les autres fonctions, les plugins prennent en charge ce qu'il ne peut pas faire.

Pour résumer en une phrase : le chargeur, une machine de chargement, est comme une machine à lait de soja. Mettez vos ingrédients et cela commencera à fonctionner sérieusement !

Chargeurs couramment utilisés

1. chargeur de babel

Ce package permet de transpiler des fichiers JavaScript à l'aide de Babel et webpack.

Chargez le code ES2015+ et utilisez Babel pour transpiler vers ES5

Installation :

npm install --save-dev babel-loader babel-core babel-preset-env webpack

Utilisation :

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2. chargeur de style

Ajoute du CSS au DOM en injectant une balise