Utilisation de base du webpack
installation du pack Web
Exécutez npm i webpack webpack-cli -D dans le terminal du projet
Configurer le webpack dans le projet
Dans le répertoire racine du projet, créez un fichier de configuration Webpack nommé webpack.config.js et initialisez la configuration de base suivante
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development'
}
Sous le nœud de script de package.json, ajoutez le script de développement comme suit :
"scripts": {
"dev":"webpack"
},
Il existe deux valeurs facultatives pour le nœud de mode, qui sont :
①
L'environnement de développement
n'effectuera pas de compression de code ni d'optimisation des performances sur les fichiers générés par le package.
La vitesse d'empaquetage est rapide et convient à une utilisation dans la phase de développement
. ② L'
environnement de production
effectuera la compression des fichiers générés par le package. Compression du code et optimisation des performances.
La vitesse d'emballage est très lente et ne convient qu'à une utilisation dans la phase de publication du projet.
Conventions par défaut dans webpack
- Le fichier d'entrée d'empaquetage par défaut src ->index.js
- Le chemin du fichier de sortie par défaut dist->main.js
Remarque : Vous pouvez modifier la convention d'empaquetage par défaut dans webpack.config.js
Entrée et sortie packagées sur mesure
Dans le fichier de configuration webpack.config.js, spécifiez l'entrée d'empaquetage via le nœud d'entrée . Spécifiez l’exportation packagée via le nœud de sortie .
const path = require('path')//导入node.js中专门操作路径的模块
//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件的名称
}
}
plugin webpack
. Les deux plug-ins webpack les plus couramment utilisés sont les suivants :
① webpack-dev-server
est similaire à l'outil nodemon utilisé dans l'étape node.js.
Chaque fois que le code source est modifié, webpack empaquetera et construira automatiquement le projet
② HTML -webpack-plugin
webpack Le plug-in HTML (similaire à un moteur de modèle)
peut être utilisé pour personnaliser le contenu de la page index.html.
webpack-dev-server permet à webpack de surveiller les modifications dans le code source du projet pour empaqueter automatiquement et construire.
Installer le serveur de développement Webpack
Exécutez la commande suivante pour installer ce plug-in dans le projet :
npm i webpack-dev-server -D
Configurer le serveur webpack-dev
① Modifiez la commande dev dans package.json -> scripts comme suit :
"scripts": {
"dev": "webpack serve"
},
② Exécutez à nouveau la commande npm run dev pour reconditionner le projet. ③ Accédez à l'adresse http://localhost:8080
dans le navigateur pour vérifier l'effet de packaging automatique. Le bundle.js généré est virtuel et affiché dans le répertoire racine du projet. . La sortie du webpack est servie à partir de / peut être affichée via http://localhost:8080/bundle.js Vous devez modifier la référence à bundle.js dans le projet
// 加载和引用内存中的bundle.js
<script src="/bundle.js"></script>
Installer le plugin html-webpack
Exécutez la commande suivante pour installer ce plug-in dans le projet :
npm i html-webpack-plugin -D
L'adresse http://localhost:8080 que nous avons empaquetée n'a pas de page index.html. Il s'agit d'un répertoire racine
. html-webpack-plugin est un plug-in HTML dans webpack. Vous pouvez personnaliser le contenu de l'index. page html via ce plug-in.
Condition : copiez la page d'accueil index.html du répertoire src vers le répertoire racine du projet via le plug-in html-webpack-plugin !
Configurer le plugin html-webpack
//导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', //指定源文件的存放地址
filename:'./index.html', //指定生成文件的存放路径
})
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
plugins:[htmlPlugin], //通过plugins节点，使htmlPlugin插件生效
}
Résoudre la confusion html-webpack-plugin
① La page index.html copiée dans le répertoire racine du projet via le plug-in HTML est également placée en mémoire
② Le plug-in HTML injecte automatiquement le fichier bundle.js packagé au bas de la page index.html générée
Objectif : On accède à http : // Le répertoire racine de localhost:8080 a index.html, qui peut être affiché directement.
devServernode
Dans le fichier de configuration webpack.config.js, vous pouvez configurer davantage de plug-ins webpack-dev-server via le nœud devServer. L'exemple de code est le suivant :
devServer:{
open:true,//初次打包完成后，自动打开浏览器
host:'127.0.0.1', //初次打包所使用的主机地址
port:80,//实时打包所使用的端口号
}
Remarque : Si vous modifiez le fichier de configuration webpack.config.js ou modifiez le fichier de configuration package.json, vous devez redémarrer le serveur de packaging en temps réel, sinon le dernier fichier de configuration ne prendra pas effet !
chargeur dans le webpack
Dans le processus de développement réel, webpack ne peut empaqueter et traiter que les modules se terminant par le suffixe .js par défaut. Les autres modules qui ne se terminent pas par un suffixe .js ne peuvent pas être traités par webpack par défaut. Vous devez appeler le chargeur pour packager normalement , sinon une erreur sera signalée !
Le rôle du chargeur est d'aider Webpack à empaqueter et à traiter des modules de fichiers spécifiques . Par exemple :
⚫ css-loader peut empaqueter et traiter des fichiers liés à .css
⚫ less-loader peut empaqueter et traiter des fichiers associés à .less
⚫ babel-loader peut empaqueter et traiter une syntaxe JS avancée que webpack ne peut pas gérer
Packager et traiter les fichiers CSS
① Exécutez la commande npm i style-loader css-loader -D pour installer le chargeur qui traite les fichiers CSS.
② Dans le tableau module -> Rules de webpack.config.js, ajoutez les règles du chargeur comme suit :
rules:[//文件后缀名的匹配规则
{
test:/\.css$/,use:['style-loader','css-loader']}
]
Parmi eux, test représente le type de fichier correspondant, use représente le chargeur correspondant à appeler.
Remarque :
⚫ L'ordre des chargeurs spécifié dans le tableau use est fixe
⚫ L'ordre d'appel de plusieurs chargeurs est le suivant : appeler de l'arrière vers l'avant
Emballer et traiter moins de fichiers
① Exécutez la commande npm i less-loader less -D
② Dans le tableau module -> Rules de webpack.config.js, ajoutez les règles du chargeur comme suit :
rules:[//文件后缀名的匹配规则
//loader调用顺序是从后往前
{
test:/\.less$/,use:['style-loader','css-loader','less-loader']},
]
Packaging et traitement des fichiers liés aux chemins d'url dans des feuilles de style
① Exécutez la commande npm i url-loader file-loader -D
② Dans le tableau module -> Rules de webpack.config.js, ajoutez les règles du chargeur comme suit :
La première façon d'écrire
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
]
La deuxième façon d'écrire
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/, //匹配图片文件
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22229
}
}
}
]
Parmi eux, voici les paramètres du chargeur : ⚫ limit est utilisé pour spécifier la taille de l'image, l'unité est l'octet (byte) ⚫ Seules les images ≤ taille limite seront converties en images au format base64
Syntaxe avancée pour l'empaquetage et le traitement des fichiers js
webpack ne peut empaqueter et traiter qu'une partie de la syntaxe JavaScript avancée. Pour la syntaxe js avancée que webpack ne peut pas gérer, vous devez utiliser babel-loader pour le traitement de l'empaquetage.
Installer les packages liés à babel-loader
Exécutez la commande suivante pour installer le package de dépendances correspondant :
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
Configurer Babel-loader
Dans le tableau module -> Rules de webpack.config.js, ajoutez les règles du chargeur comme suit :
{
test:/\.js$/,
//exclude为排除项
// 表示babel-loader只需要处理开发者编写的js文件，不需要处理node_modules下的js文件
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
//参数项
//声明一个babel插件，此插件用来转化class中的高级语法
plugins:['@babel/plugin-proposal-class-properties'],
}
}
}
Package et version
Configurer l'empaquetage et la publication du pack Web
Sous le nœud scripts du fichier package.json, ajoutez la commande build comme suit :
"scripts": {
"dev": "webpack serve", //开发环境中，运行dev命令
"build":"webpack --mode production" //项目发布时，运行build命令
},
–model est un paramètre utilisé pour spécifier le mode d'exécution du webpack. La production représente l'environnement de production et effectuera la compression du code et l'optimisation des performances sur les fichiers générés par l'empaquetage.
Remarque : Les paramètres spécifiés via --model remplaceront l'option de modèle dans webpack.config.js.
Générez des fichiers JavaScript dans le répertoire js
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
//明确告诉webpack把生成的bundle.js文件存放到dist目录下的js目录中
filename:'js/bundle.js'
},
Générer des fichiers image dans le répertoire d'images
{
test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22228,
outputPath:'image',
}
}
},
Nettoyer automatiquement les anciens fichiers dans le répertoire dist
Afin de nettoyer automatiquement les anciens fichiers du répertoire dist à chaque fois que vous empaquetez et publiez , vous pouvez installer et configurer le plug-in clean-webpack-plugin :
Exécutez maintenant la commande suivante dans le terminal du projet
npm i clean-webpack-plugin -D
Configurer clean-webpack-plugi
//按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins:[htmlPlugin,cleanPlugin], //通过plugins节点，挂载插件
Carte des sources
Carte source dans l'environnement de développement Webpack
Dans l'environnement de développement, webpack active la fonction Source Map par défaut. Lorsqu'une erreur se produit pendant l'exécution du programme, vous pouvez directement demander l'emplacement de la ligne d'erreur sur la console et localiser le code source spécifique.
Problème avec la carte source par défaut
La carte source générée par défaut dans l'environnement de développement enregistre l'emplacement du code généré. Cela entraînera le problème selon lequel le nombre de lignes dans l'erreur d'exécution est incohérent avec le nombre de lignes dans le code source.
Résoudre le problème de la carte source par défaut
Dans un environnement de développement, il est recommandé d'ajouter la configuration suivante à webpack.config.js pour s'assurer que le nombre de lignes d'erreur à l'exécution est cohérent avec le nombre de lignes de code source :
eval-source-map n'est utilisé qu'en développement mode production et n’est pas recommandé.
module.exports={
mode:'development',
devtool:'eval-source-map',
}
Carte source dans l'environnement de production Webpack
Dans un environnement de production , si l'option devtool est omise , la carte source ne sera pas incluse dans le fichier final généré . Cela empêche le code original d'être exposé à des parties non autorisées via la carte source.
Dans un environnement de production, si vous souhaitez uniquement localiser le nombre spécifique de lignes où l'erreur a été signalée et que vous ne souhaitez pas exposer le code source . À l'heure actuelle, la valeur de devtool peut être définie sur nosources-source-map .
Dans un environnement de production, si vous souhaitez afficher le code source de l'erreur spécifique tout en localisant le nombre de lignes d'erreur . À ce stade, la valeur de devtool peut être définie sur source-map. Après avoir utilisé cette option : Vous devez configurer votre serveur pour ne pas autoriser les utilisateurs ordinaires à accéder au fichier de carte source !
Meilleures pratiques pour les cartes sources
① Dans un environnement de développement :
⚫ Il est recommandé de définir la valeur de devtool sur eval-source-map
⚫ Avantage : vous pouvez identifier la ligne d'erreur spécifique
② Dans un environnement de production :
⚫ Il est recommandé de désactiver Source Map ou de définir la valeur de devtool vers nosources-source-map
⚫ Avantages : évitez les fuites de code source et améliorez la sécurité du site Web