Analyse du chargeur de webpack3

Que peut faire le 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. Cet article présente principalement l'analyse complète du chargeur de webpack3. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Concept

loader, comme son nom l'indique, loader, l'explication en anglais est la suivante :

Les Loaders sont des transformations qui s'appliquent sur la source code d'un module. Ils vous permettent de prétraiter les fichiers lorsque vous les importez ou les « chargez ». Ainsi, les chargeurs sont un peu comme des « tâches » dans d'autres outils de construction et fournissent un moyen puissant de gérer les étapes de construction frontales. Les chargeurs peuvent transformer des fichiers d'un langage différent (comme TypeScript) en JavaScript, ou des images en ligne sous forme d'URL de données. Les chargeurs vous permettent même de faire des choses comme importer des fichiers CSS directement à partir de vos modules JavaScript !

La traduction chinoise est :

Loader est utilisé pour convertir le code source du module. Les chargeurs vous permettent de prétraiter les fichiers lors de l'importation ou du "chargement" de modules. Par conséquent, les chargeurs sont similaires aux « tâches » dans d’autres outils de build et fournissent un moyen puissant de gérer les étapes de build frontales. Les chargeurs peuvent convertir des fichiers de différents langages (tels que TypeScript) en JavaScript, ou des images en ligne en URL de données. Le chargeur permet même d'importer des fichiers CSS directement dans les modules JavaScript !

À 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 il commencera à fonctionner sérieusement !

Chargeurs couramment utilisés

1. babel-loader

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

Chargez le code ES2015+, puis utilisez Babel pour traduire vers ES5

Installation :

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

Utiliser :

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

2. style-loader

Ajoute du CSS à le DOM en injectant une balise