Il n'y a rien de mal à apprendre le Webpack pour gagner la gloire du roi

Présentation du héros

Weibo Parker est né au pays des guerriers de l'extrême ouest. Il possède de superbes compétences en mécanique et sait utiliser divers outils pour réaliser des choses apparemment impossibles. Par hasard, j'ai rencontré un jeune Mozi et je suis devenu ami avec lui. Plus tard, il a aidé le grand maître Mozi à construire la plus grande ville du continent, qui a été appelée le plus grand miracle après la fin de la civilisation antique - Chang'an! Chang'an prend «l'Arche» comme centre de base, avec l'émergence continue d'agences, gardant le magnifique Daming Palace. Parker est discret et n'aime pas apparaître aux yeux du public. Il est un idéaliste qui a besoin de l'illumination humaine et croit que seule une évolution glorieuse peut réaliser le plein potentiel de l'humanité.

Nom: Webpack (webpack)

Classement de popularité: T0

Taux de victoire: 98%

Taux d'apparition: 80% (90% des projets moyens et grands)

Taux d'interdiction: 10%

Difficulté de fonctionnement: ★★★★★

compétence:

Passif: (technologie d'arme magique d'auto-croissance)

cd: 0 seconde

Pike commencera avec son équipement exclusif [chargeur], qui peut lui fournir des attributs, et peut être mis à niveau vers des éléments avancés [plugin] dans le magasin pour améliorer ses compétences.

Siphon d'énergie (entrée d'entrée)

Parker a désigné l'équipement initial pour commencer les préparatifs évolutifs, au cours desquels il bénéficie d'un bonus d'endurance de 20% .Après la mise à niveau, il peut désigner plusieurs équipements pour évoluer.

(Entrée est utilisée pour spécifier le fichier d'entrée, un ou plusieurs peuvent être configurés.)

Utilisation basique:

module.exports = {  entry: './path/to/my/entry/file.js'} // 默认可配置一个路径字符串;

Chaîne: chaîne de chemin d'accès commun par défaut ./src. Utilisation avancée:

1 const config = {
2   entry: './src/a.js'
3 };

Tableau: le passage d'un tableau de chemins créera plusieurs entrées principales, ce qui convient à l'importation de plusieurs fichiers dépendants dans un bloc.

const config = {
  entry: ['./src/a.js','./src/b.js','./src/c.js',]
};

Objet: transmettez un objet pour spécifier la valeur clé (nom de l'entrée) et la valeur (chemin) des différentes entrées. La chaîne de caractères est un raccourci pour la méthode objet. Convient aux applications multi-pages

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

The Evil Shadow: (exportation de sortie)

cd: 10 secondes

Parker se téléportera à l'emplacement désigné après n secondes (selon la complexité du travail de Parker actuel) de chants.

(La sortie est utilisée pour configurer la sortie et la dénomination du fichier packagé. La norme minimale pour configurer la sortie est de définir un objet pour inclure les deux points suivants :)

filename Le nom du fichier de sortie
chemin Le chemin absolu du répertoire de sortie

Utilisation basique:

const path = require('path');

module.exports = {
  entry: './src/js/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test.bundle.js'
  }
};

Utilisation avancée:

Lorsque plusieurs fichiers d'entrée sont configurés et que vous souhaitez générer différents blocs, vous devez utiliser des espaces réservés pour le nom de fichier afin de garantir l'unicité du nom de fichier.

Espace réservé:

nom - utilisez le nom de l'entrée
id-use identifiant de bloc interne
Hash - utilisez le hachage unique dans chaque processus de construction
chunkhash-utiliser un hachage basé sur le contenu de chaque morceau
nom du fichier d'utilisation de la requête? Chaîne derrière

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

Chargeur

cd: 8 secondes

Pike peut assimiler les compétences d'autres héros et les convertir en énergie utilisable. Réussir à absorber les attributs de base + 200%.

(Webpack lui-même ne peut traiter que les fichiers js. Loader peut convertir d'autres types de fichiers en modules qui peuvent être traités par webpack, et les emballer ou effectuer d'autres opérations. Il est utilisé en conjonction avec le module modules et est implémenté en configurant module.rules. Loader équivaut à une autre tâche de l'outil.)

Le noyau du chargeur a deux attributs:

test: correspond aux fichiers qui doivent être convertis par le chargeur
use: Spécifiez le chargeur à convertir

Configuration de base:

const path = require('path');

const config = {
  output: {
    filename: 'test.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

Configuration avancée:

Les règles vous permettent de configurer plusieurs chargeurs lors du traitement d'un fichier, il vous suffit de passer un tableau à utiliser contenant différents objets chargeurs

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

Opération Sao: Elle peut être utilisée dans l'instruction d'importation! Séparez le chargeur dans la ressource, de sorte que vous puissiez utiliser une méthode en ligne pour le traitement du chargeur sans configurer Webpack, mais cette méthode n'est pas recommandée car elle est difficile à maintenir.　　

import Styles from 'style-loader!css-loader?modules!./styles.css';

Glorious Evolution (plugins)

cd: 35 secondes

Parker fait évoluer le chargeur, via le plugin, amplifie et renforce vos héros à moins de 5000 mètres et entre dans l'état dominateur pendant 10 secondes.

(Différent du chargeur utilisé pour analyser les types de fichiers non-js, le plugin peut être utilisé pour gérer des tâches plus complexes, y compris l'empaquetage, l'optimisation, la compression et la redéfinition minimale des variables d'environnement. Il est très puissant, à l'exception des plugins matures fournis par le marché des plugins, Vous pouvez également l'écrire vous-même. Le plugin apporte plus de fonctionnalités au chargeur, et son but est de résoudre d'autres choses que le chargeur ne peut pas accomplir.

Vous n'en avez besoin require（）que pour utiliser un plug-in , puis l'ajouter au module de plug-in. Habituellement, la plupart des plug-ins sont personnalisables. Par conséquent, si vous souhaitez utiliser des plug-ins avec différentes fonctions de configuration dans un fichier de configuration, vous devez créer une nouvelle instance via new. )

Configuration de base:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Double personnalité (mode mode)

cd: 1,5 seconde

Mode de commutation Parker, mode bourreau de travail: vitesse de déplacement augmentée de 50%, mode artiste: ralentissement de 30% tout en augmentant sa propre endurance de 50%, contrôle immunitaire.

(En modeconfigurant l'environnement de développement (développement) et l'environnement de production (production), vous pouvez activer l'optimisation intégrée de webpack dans le mode correspondant.)

development：启用NamedChunksPlugin和NamedModulesPlugin插件

production：启用
    FlagDependencyUsagePlugin,
    FlagIncludedChunksPlugin, 
    ModuleConcatenationPlugin, 
    NoEmitOnErrorsPlugin, 
    OccurrenceOrderPlugin, 
    SideEffectsFlagPlugin和 UglifyJsPlugin插件。

Configuration:

module.exports = {
  mode: 'production' // 或development
};

Brilliance of the Wise (analyse du module reslove)

cd: 60 secondes

Parker entre en mode de recherche rapide de chemin à l'emplacement désigné et analyse automatiquement l'itinéraire le plus proche, en ignorant les obstacles du terrain.

(En configurant la résolution pour résoudre le chemin du fichier, reslove peut être configuré pour utiliser des plug-ins exclusifs.)

Prend actuellement en charge la résolution de trois chemins de fichiers: chemin absolu, chemin relatif, chemin du module

Configurer l'alias (le plus couramment utilisé)

La création d'alias pour l'importation ou le require peut faciliter l'introduction du module. exemple:

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

Aucun alias n'est configuré:

import Utility from '../../utilities/utility';

Alias déjà configuré:

import Utility from 'Utilities/utility';

Boîte aux trésors (module module)

Parker dispose d'un espace qui peut stocker n'importe quel matériel et peut stocker des équipements par catégories. Après l'activation, la barre d'équipement augmentera de 3 et la vitesse de déplacement sera réduite de 20%

(En configurant le module pour gérer différents types de modules dans le projet.) Règles correspondant au tableau de règles (le plus couramment utilisé) Lors de la création d'un module, faites correspondre le tableau de règles demandé. La façon dont le module est créé peut être modifiée par des règles. Ces règles peuvent appliquer des chargeurs aux modules ou modifier les analyseurs.

const config = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};

Production recommandée

Traitement des fichiers

raw-loader Chargez le contenu original du fichier (utf-8)
val-loader Exécutez le code en tant que module et convertissez les exportations en code JS
url-loader Fonctionne comme un chargeur de fichiers, mais si le fichier est plus petit que la limite, vous pouvez renvoyer l'URL des données
file-loader Envoyez le fichier dans le dossier de sortie et renvoyez l'URL (relative)

JSON

json-loader Charger le fichier JSON (inclus par défaut)
json5-loader Charger et traduire des fichiers JSON 5
cson-loader Chargement et traduction de fichiers CSON

Transpiler

script-loader Exécutez le fichier JavaScript une fois dans le contexte global (comme dans la balise de script) sans analyse
babel-loader Chargez le code ES2015 +, puis utilisez Babel pour traduire en ES5
buble-loader Utilisez Bublé pour charger le code ES2015 + et traduire le code en ES5
traceur-loader Chargez le code ES2015 +, puis utilisez Traceur pour traduire en ES5
ts-loader Ou awesome-typescript-loader charge TypeScript 2.0+ comme JavaScript
coffee-loader Charger CoffeeScript comme JavaScript

Création de modèles

html-loader Exporter le HTML sous forme de chaîne, besoin de citer les ressources statiques
pug-loader Chargez le modèle Pug et renvoyez une fonction
jade-loader Chargez le modèle Jade et renvoyez une fonction
markdown-loader Traduire Markdown en HTML
react-markdown-loader Utilisez l'analyseur markdown-parse pour compiler Markdown en composants React
posthtml-loader Utilisez PostHTML pour charger et convertir des fichiers HTML
handlebars-loader Transférer les guidons en HTML
markup-inline-loader Convertissez les fichiers SVG / MathML en ligne en HTML. Très utile lorsqu'il est appliqué à des polices d'icônes ou lors de l'application d'une animation CSS à SVG.

style

style-loader Ajouter l'export du module en tant que style au DOM
css-loader Après avoir analysé le fichier CSS, utilisez l'importation pour charger et renvoyer le code CSS
less-loader Charger et traduire des fichiers LESS
sass-loader Charger et traduire les fichiers SASS / SCSS
postcss-loader Utilisez PostCSS pour charger et traduire des fichiers CSS / SSS
stylus-loader Chargement et traduction de fichiers Stylus

Linting && Test

mocha-loader Utiliser le test mocha (navigateur / NodeJS)
eslint-loader PreLoader, utilisez ESLint pour nettoyer le code
jshint-loader PreLoader, utilisez JSHint pour nettoyer le code
jscs-loader PreLoader, utilisez JSCS pour vérifier le style du code
coverjs-loader PreLoader, utilisez CoverJS pour déterminer la couverture de test

Cadre (Frameworks)

vue-loader Chargement et traduction des composants Vue
polymer-loader Utilisez un préprocesseur pour traiter et require () similaire aux composants Web de première classe
angular2-template-loader Charger et traduire des composants angulaires

Plugins couramment utilisés

ProgressPlugin(Inclus avec le webpack): utilisé pour compter la progression de l'emballage
IgnorePlugin(Inclus avec webpack): Ignorez certains modules locaux
DllPlugin(Inclus avec webpack): fichiers pré-emballés
DllReferencePlugin(Inclus avec le webpack): l'empaquetage du projet fait référence aux fichiers pré-emballés
AssetsWebpackPlugin： Générer des directives de référence de chemin pour les js packagés, etc.
HappyPack: Utilisez le multicœur pour accélérer le packaging
ExtractTextPlugin: Séparez le css dans le package
EnvironmentPlugin(Inclus avec webpack): définissez les variables globales qui peuvent être utilisées dans le projet au niveau du webpack
DefinePlugin(Inclus avec webpack): définissez les variables globales qui peuvent être utilisées dans le projet au niveau du webpack et la forme d'EnvironnementPlugin est différente.
CleanWebpackPlugin: Nettoyer les fichiers dans le répertoire spécifié
CopyWebpackPlugin: Attribuer les fichiers du répertoire spécifié au répertoire spécifié
HtmlWebpackPlugin： La page Html est automatiquement générée après l'emballage du Webpack
ParallelUglifyPlugin: compression accélérée

La présentation des héros dans ce numéro est terminée. Je vous souhaite tout le meilleur du pays dès que possible. A la prochaine fois.

Vous pouvez afficher la page dans le mini programme