Présentation du webpack
notion de webpack :
- webpack est un outil d'emballage frontal
- Utilisez-le pour gérer les dépendances complexes des front-ends modernes (un plugin nécessite un plugin B un plugin B a un plugin D un plugin F nécessite un plugin) pour générer des ressources statiques que les navigateurs peuvent reconnaître
- L'échafaudage de stade précoce de Vue est réalisé avec webpack (Vue commence à recommander l'utilisation de l'outil de construction rapide (plus rapide)), les échafaudages réactifs, les échafaudages angulaires et autres cadres modernes reposent tous sur webpack
- Webpack est essentiellement un bundler de modules statiques pour les applications JavaScript modernes.
Principales fonctions du webpack
Il fournit une prise en charge conviviale du développement modulaire frontal, ainsi que des fonctions puissantes telles que la compression et l'obscurcissement du code, le traitement de la compatibilité JavaScript côté navigateur et l'optimisation des performances.
Le concept de base du webpack :
1. Le
point d'entrée est
le point de départ de l'opération du projet
et indique à Webpack où commencer l'emballage
2. Exporter la sortie
L'attribut output indique à webpack où sortir le bundle qu'il crée et comment nommer ces fichiers
3. Mode (3 types)
development(environnement de développement)
- La compression du code et l'optimisation des performances ne seront pas effectuées sur les fichiers générés par l'empaquetage, et la vitesse d'empaquetage est rapide.
- adapté à une utilisation pendant la phase de développement
production(environnement de production) mode par défaut
- La compression du code et l'optimisation des performances seront effectuées sur les fichiers générés par l'empaquetage
- La vitesse d'empaquetage est très lente et ne convient que pour une utilisation dans la phase de lancement du projet
none
//入口、出口、模式
const path = require('path');
module.exports = {
// 入口
// entry:'./src/index.js',
entry:{
"vue":"./src/main.js",
"base":"./src/index.js"
},
// 输出
output:{
// 路径，__dirname 当前目录
path:__dirname+"/dist",
// 文件名称
filename:'[name]-[hash:7].js'
},
mode: 'production',//mode模式:produce产品开发模式
};
4. Loader loader
webpack ne peut charger et traiter que des fichiers js par défaut.
loaderi permet à webpack d'avoir la possibilité de traiter d'autres fichiers
5. Effectuez d'autres tâches (compression, nettoyage) pendant le cycle de vie du plugin plugin webpack
Configuration du pack Web :
Dans le fichier de configuration par défaut webpack.configjs
Logo spécial :
[hash] Une chaîne de caractères calculée par l'algorithme de hachage
[hash:7] Prend les 7 premiers caractères de la chaîne de hachage
[name] le nom du fichier d'origine
[ext] le nom du suffixe du fichier
Séparation de code :
Site officiel de séparation de code
Configurez la séparation de code dans le fichier de configuration webpack.config.js
//webpack.config.js文件中
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}
définir l'alias du répertoire
webpack.config.jsdéfini dans le fichier de configuration
resolve: {
//别名: @代表是src目录resolve: {
//别名: @代表是src目录
alias: {
//将@ 设置为src的别名
'@': path.resolve(__dirname, './src'),
}
},
outils de développement
Référence de la documentation officielle de l'outil de développement
Fonction : il existe une correspondance biunivoque entre les erreurs et les codes sources
webpack.config.jsConfigurer les outils de développement dans le fichier de configuration
devtool:"eval-cheap-source-map",
lien et script
<script defer src=""></script>Attendez que le contenu de la page se charge avant de charger js<link href="" rel=prefetch>précharger css à l'avance
Importer js à la demande (combiné avec des annotations magiques webpack)
1. Installez jQuery
npm i jquery -S
2. Importer dans src/index.js
2.1 Importer directement js
import $ from 'jquery'
console.log($)
2.2 Importer js à la demande (combiné avec des commentaires magiques webpack)
//魔法注释
//01 给当前的js 文件命名
/* webpackChunkName:"jquery" */
//02 网络有空闲预加载js
/* webpackPrefetch: true */
big.onclick = function() {
import( /* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({
default: $
}) => {
console.log($);
})
}
opération multi-entrées/multi-sorties webpack (dans webpack/config.js)
Boîtier : index/principal double entrée/sortie
//入口
entry: {
"index": '@/index.js',
"main": '@/main.js',
},
//出口
plugins: [
// 实例化插件，指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html',//模板
chunks:["index"],//入口
filename:"index.html" //文件名
}),
new HtmlWebpackPlugin({
template:'./public/main.html',//模板
chunks:["main"],//入口
filename:"main.html" //文件名
}),
]
nommage par hachage
contenthash chunkshash hash
Fonction :
01 Peut contrôler le cache du navigateur
Lorsque le fichier change, le hachage change, le nom du fichier change également et le navigateur ne met pas en cache.
Lorsque le nom du fichier reste inchangé, le navigateur demande le contenu du cache pour le deuxième requête
02 Améliorer la vitesse de chargement secondaire (maîtriser efficacement la mise en cache)
contenthash
La valeur contenthash ne change que lorsque le contenu changechunkshash
Lorsque l'entrée change, le fichier actuel chunkhashhash changerahash
Tant que le contenu du projet change, le hachage changera
variable d'environnement
Configuration : Compressez le code dans l'environnement du produit via la commande environment, afin que l'environnement de production ne comprime pas le code, ouvrez devtool
1. Mise en place
npm i cross-env -D
2. Passage du paramètre package.json
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",
3. Utilisation de webpack.config.js
mode:process.env.NODE_ENV,
devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',
4. Utilisation dans le fichier js
var baseURL = "";
if(process.env.NODE_ENV=="production"){
baseURL = "http://dida100.com";
}else{
baseURL = "http://localhost"
}
console.log("当前环境：",process.env.NODE_ENV,baseURL);
comme le montre l'image
Installer un échafaudage vue
1. Mise en place
npm i vue -S
npm i vue-loader -D (处理.vue)
npm i vue-template-compiler -D (编译vue目录)
npm i vue-hot-reload-api -D (热更新)
npm i vue-style-loader -D (处理vue 样式)
2. Importer/configurer/utiliser dans webpack.config.js
//导入
const {
VueLoaderPlugin} = require("vue-loader")
//配置
{
test:/\.vue$/,use:["vue-loader"]}
//使用
plugins:[new VueLoaderPlugin()]
3. Utiliser en js
main.js
//在main.js
//创建
import {
createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);
// 创建App并挂载
createApp(App).mount("#app")
main.html
<div id="app"></div>
app.vue
<template >
<div>
<h1>你好Vue3</h1>
</div>
</template >
L'effet de page obtenu comme indiqué dans la figure ci-dessous
Ensuite, comment utiliser Webpack'
Utiliser webpack pour fonctionner
1. Installer
1.1 Créer un projet/initialiser un projet/installer l'échafaudage Webpack
2. Exécutez webpack
2.1 Créez un fichier dist/index.html et introduisez main.js (doit être introduit dans le corps)
2.2 Nouveau src/header.js || index.js
2.3 Créez une balise div dans scr/header.js et insérez le contenu de la balise
2.4 Importer header.js dans src/index.js et l'ajouter au corps
2.5 Dans cmd vers le répertoire racine du pack, le dossier dist npx webpackapparaîtra à ce moment mian.js
2.6 Exécutez-le simplement dans le navigateur
3. Configurez webpack.config.js
3.1 Définir le mode entrée/sortie/développement dans webpack.config.js
4. Installez le plugin
Plugin de modèle html 4.1
La fonction du plug-in de modèle html : générer le fichier de modèle htmI et insérer automatiquement le js empaqueté dans le fichier de modèle
4.1.1 Mise en place :
npm i html-webpack-plugin -D
4.1.2 Créer un fichier public/index/js
4.1.3 Importer et configurer dans webpack.config.js
//const导入
const HtmIWebpackPlugin = require("html-webpack-plugin'")
plugins: [
// 实例化插件 指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html' //自行创建
})
],
4.2 Nettoyer automatiquement le plugin du répertoire dist
Fonction : supprimer le répertoire dist avant le conditionnement
4.2.1 Installation
npm i clean-webpack-plugin -D
4.2.2 importer et configurer webpack.config
//导入
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
//配置
plugins: [new CleanWebpackPlugin()]
Plugin d'optimisation css/js 4.3
4.3.1 Optimisation CSS
4.3.1.1 Installation
//安装插件
npm i css-minimizer-webpack-plugin -D
4.3.1.2 Importer/utiliser dans la configuration
//在webpack.config.js配置文件中
//01导入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//02使用
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
Plugin d'optimisation 4.3.2 js
site officiel du plug-in js,
le fonctionnement est le suivant
4.3.2.1 Installation
//安装js压缩插件
npm i terser-webpack-plugin -D
4.3.2.2 Importer/utiliser dans la configuration
//webpack.config.js文件中
//01 导入：
const TerserPlugin = require("terser-webpack-plugin");
//02 使用
optimization: {
minimize: true, //默认是压缩
minimizer: [new TerserPlugin()],//压缩器
},
Réalisez enfin la compression et l'optimisation css/js
5. chargeur chargeur
5.1 traitement du chargeur css
Rôle : css-loader. Traitement. Le fichier CSS style-loader charge le css dans la balise de style
5.1.1 Installation
//安装样式
npm i css-loader style-loader -D
5.1.2 Créer assets/index.css dans src/ (pour l'édition)
5.1.3 Importer du CSS dans src/index.js
5.1.4 Configurer les styles dans webpack.config.js
//配置
module: {
rules: [{
test: /\.css$/,
// 当文件test通过,使用如下插件
use: ["style-loader", "css-loader"]
}]
},
5.2 Traitement des fichiers (images, fichiers)
Fonction : charger des images et des fichiers
5.2.1 Installation
//安装
npm i file-loader url-loader -D
5.2.2 Configuration dans webpack.config.js
{
test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use: [{
loader: "url-loader",
options: {
limit: 5000,name: 'images/[hash].[ext]'},
}]
}
5.2.3 Importer et définir des images dans la page src/index.js
effet de page
6. serveur local devserver ouvert
6.1 Installation
//安装本地服务器
npm i webpack-dev-server -D
6.2 La configuration de webpack.config.js définit le contenu du serveur
finir…