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 c9ccee2e6ea535a969eb3f532ad9fe89

Ajouter l'export du module dans le DOM en tant que style

Installation :

npm install style-loader --save-dev

Il est recommandé de l'utiliser avec css-loader

Utiliser :

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3. css-loader

Après avoir analysé le fichier CSS, utilisez import pour le charger et renvoyer le code CSS

Installation :

npm install css-loader --save-dev

Utilisation :

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4 . less-loader

Charger et traduire les fichiers LESS

Installer :

npm install --save-dev less-loader less

Utiliser :

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5. url-loader

Charge les fichiers en base64. URL encodée

Traitez les fichiers image, mais si le fichier est plus petit que la limite, vous pouvez renvoyer l'URL des données

Installation :

npm install --save-dev url-loader

Utilisation :

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6.
Demande au webpack d'émettre l'objet requis sous forme de fichier et de renvoyer son URL publique

Gérer la police/svg etc., envoyer le fichier dans le dossier de sortie et renvoyer le (relatif ) URL

Installation :

Utilisation :

npm install file-loader --save-dev

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

7. vue-loader

Chargement et traduction des composants Vue

Installation :

Utilisation :

npm install --save-dev vue-loader vue vue-template-compiler

Recommandations associées :

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

Détail explication du chargeur de classe classloader basé sur la méthode de chargement de classe Java

Comment comprendre le chargeur et le plugin dans webpack

Exemple d'analyse de la façon dont yii2 utilise webuploader pour mettre en œuvre le téléchargement d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!