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 :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
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}2. chargeur de style
Ajoute du CSS au DOM en injectant une balise