Outils d'emballage
Le code développé à l'aide de frameworks (React, Vue), de la syntaxe modulaire ES6, de Less/Sass et d'autres préprocesseurs CSS et d'autres syntaxes doit être compilé en JS, CSS et autres syntaxes que le navigateur peut reconnaître avant de pouvoir être exécuté.
Nous avons donc besoin d’outils de packaging pour nous aider à faire ces choses. De plus, les outils d'empaquetage peuvent également compresser le code, effectuer un traitement de compatibilité, améliorer les performances du code, etc.
Quels sont les outils d'emballage disponibles ?
Grunt, Gulp, Parcel, Webpack , Rollup, Vite
Qu'est-ce que le webpack
Webpack est un outil frontal de packaging de ressources statiques. Du point de vue de webpack, tous les fichiers de ressources du front-end (js/json/css/img/less/…) seront traités comme des modules. En utilisant un ou plusieurs fichiers comme point d'entrée pour l'empaquetage, nous compilons et combinons tous les fichiers de l'ensemble de notre projet en un ou plusieurs fichiers et les produisons. Le fichier de sortie est le fichier compilé et peut être exécuté dans la section du navigateur. Il effectuera une analyse statique basée sur les dépendances du module, et emballera et générera les ressources statiques correspondantes (bundle).
Webpack lui-même a des fonctions limitées :
Mode développement : peut uniquement compiler la syntaxe du module ES en JS.
Mode production : peut compiler la syntaxe du module ES en JS et peut également compresser le code JS.
Cinq concepts fondamentaux du webpack
1.
Entry (Entry) demande à Webpack d'utiliser quel fichier comme point de départ d'entrée pour commencer l'empaquetage, analyser et créer le graphique de dépendances interne.
2.La
sortie de sortie (Output) indique à Webpack où sortir les ensembles de ressources emballés et comment les nommer.
3. Loader
Loader permet à Webpack de traiter des fichiers non JavaScript (le webpack lui-même ne comprend que JavaScript).
4.PluginsLes plugins
peuvent être utilisés pour effectuer un plus large éventail de tâches. Les plug-ins vont de l'optimisation et de la compression du packaging à la redéfinition des variables dans l'environnement.
5. Mode
mode (Mode) demande à webpack d'utiliser la configuration du mode correspondant.
Utilisation de base du webpack
npm init -yInitialisez un fichier de description de package. Après l'exécution, package.json sera généré
. Activez Webpack (mode développement) : npx webpack ./src/main.js --mode=development, et chaque fois que vous écrivez le fichier de configuration, vous définirez directement npx webpack
la marque de réussite :
Par défaut, Webpack empaquetera et affichera le fichier dans le répertoire dist.
configuration de base du pack Web
Créez un nouveau fichier de configuration dans le répertoire racine du projet : webpack.config.js
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// 入口文件输出路径
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
// clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
Webpack fonctionne sur la base de Node.js, il adopte donc la spécification modulaire Common.js
Gestion des ressources de style
Webpack lui-même ne peut pas reconnaître les ressources de style (Css, Less, Sass, Scss, Styl), nous devons donc utiliser Loader pour aider Webpack à analyser les ressources de style.
Gérer les ressources CSS
Deux chargeurs doivent être téléchargés : npm i css-loader style-loader -D
css-loader : responsable de la compilation des fichiers CSS dans des modules que Webpack peut reconnaître.
style-loader : il créera dynamiquement une balise Style, qui contient le contenu du module CSS dans Webpack.
Utilisation : Ajoutez aux règles dans webpack.config.js :
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
src/css/index.css：
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
src/main.js：
import count from "./js/count";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
console.log(count(2, 1));
public/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/static/js/main.js"></script>
</body>
</html>
Exécutez la commande :npx webpack , ouvrez la page index.html pour voir l’effet.
Le même principe s'applique aux autres (Less, Sass, Scss, Styl), il suffit de suivre la configuration du site officiel .
Ressources d’image de processus
Webpack4 traite les ressources d'image via un chargeur de fichiers et un chargeur d'URL. Désormais, Webpack5 a intégré les deux fonctions de chargement dans Webpack. Il ne nécessite qu'une configuration simple pour traiter les ressources d'image.
Utilisation : ajoutez aux règles dans webpack.config.js :
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
//对图片资源进行优化
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
//修改输出资源的名称和路径
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
},
Optimiser les ressources images : Convertir les images inférieures à une certaine taille au format URI de données (format Base64, avantages : réduire le nombre de requêtes ; inconvénients : taille plus grande), les images sont intégrées en js sous forme d'URI de données, pas de sortie vers dist . (Remarque : vous devez effacer les fichiers générés par le dernier emballage, puis les reconditionner pour avoir l'effet )
Webpack affichera toutes les ressources d'image empaquetées dans le répertoire dist. Les ressources de style sont traitées par style-loader et empaquetées dans main.js, il n'y a donc pas de sortie supplémentaire.
tapez : "asset/resource" est équivalent à file-loader, qui convertit les fichiers en ressources que Webpack peut reconnaître et ne traite pas le reste ; tapez :
"asset" est équivalent à url-loader, qui convertit les fichiers en ressources que Webpack peut reconnaître, et en même temps les ressources inférieures à une certaine taille seront traitées sous forme d'URI de données.
Traiter les ressources js
Le traitement de js par Webpack est limité. Il ne peut compiler que la syntaxe modulaire ES dans js et ne peut pas compiler une autre syntaxe. Par conséquent, js ne peut pas s'exécuter dans des navigateurs tels que IE, un certain traitement de compatibilité doit donc être effectué. Deuxièmement, lors du développement, l’équipe a des exigences strictes en matière de format de code et doit utiliser des outils professionnels pour le détecter. Pour le traitement de la compatibilité js, utilisez Babel ; pour le format de code, utilisez Eslint.
Eslint
Un outil utilisé pour détecter la syntaxe js et jsx. Écrivez diverses règles dans le fichier de configuration Eslint. Lors de l'exécution future d'Eslint, le code sera vérifié en fonction des règles écrites.
1. Téléchargez le package :npm i eslint-webpack-plugin eslint -D
2. Définissez le fichier de configuration Eslint .eslintrc.js:
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
// 解析选项
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: {
// ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
règles Règles spécifiques :
"off" ou 0 - désactiver la règle
"avertir" ou 1 - activer la règle, utiliser le niveau d'avertissement erreurs : avertir (ne provoquera pas la fermeture du programme)
"erreur" ou 2 - activer la règle , utilisez le niveau d'erreur erreurs : erreur (une fois déclenché, le programme se fermera)
étend l'héritage : Il est trop laborieux d'écrire des règles petit à petit pendant le développement, il existe donc une meilleure façon d'hériter des règles existantes :
Règles officielles d'Eslint : eslint : recommandé
Règles officielles de Vue Cli : plugin : vue/essential
Règles officielles de React Cli : réagir-application
3. Modifier main.js
4. Configurez webpack.config.js :
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
……
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
5. Exécutez la commande :npx webpack
VSCode a un plug-in Eslint, vous pouvez donc voir les erreurs sans compilation. À ce stade, tous les fichiers du projet seront vérifiés par Eslint par défaut et les erreurs seront signalées pour les fichiers packagés dans le répertoire dist.
Il vous suffit donc de vérifier les fichiers sous src, et il n'est pas nécessaire de vérifier les fichiers sous dist. Utilisez Eslint pour ignorer les fichiers. Créez les fichiers suivants dans le répertoire racine du projet.eslintignore :
# 忽略dist目录下所有文件
dist
Babel
Compilateur JavaScript, principalement utilisé pour convertir le code écrit avec la syntaxe ES6 en syntaxe JavaScript rétrocompatible afin qu'il puisse s'exécuter dans les versions actuelles et anciennes de navigateurs ou d'autres environnements.
1. Téléchargez le package :npm i babel-loader @babel/core @babel/preset-env -D
2. Définissez le fichier de configuration Babel babel.config.js:
module.exports = {
presets: ["@babel/preset-env"],
};
préréglages : il s'agit d'un ensemble de plug-ins Babel qui étendent les fonctions de Babel.
@babel/preset-env : Un préréglage intelligent qui permet d'utiliser le dernier JavaScript.
@babel/preset-react : Un préréglage pour compiler la syntaxe React jsx.
@babel/preset-typescript : Un préréglage pour compiler la syntaxe TypeScript.
3. Modifier main.js
4. Configurez webpack.config.js :
Ajoutez : dans les règles :
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
5. Exécutez la commande :npx webpack
Gérer les ressources HTML
1. Téléchargez le package : npm i html-webpack-plugin -D
2. Configurez webpack.config.js :
const HtmlWebpackPlugin = require("html-webpack-plugin");
……
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
3. Modifiez index.html : supprimez le fichier js importé, car HtmlWebpackPlugin l'introduira automatiquement.
4. Exécutez la commande :npx webpack
automatisation
Chaque fois que vous avez fini d'écrire du code, vous devez saisir manuellement des instructions pour compiler le code. C'est trop gênant. Utilisons le serveur de développement pour l'automatiser.
1. Téléchargez le package : npm i webpack-dev-server -D
2. Configurez webpack.config.js :
module.exports = {
// 添加开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
};
3. Exécutez la commande : npx webpack serve
Remarque : lors de l'utilisation du serveur de développement, tout le code sera compilé et empaqueté en mémoire et ne sera pas affiché dans le répertoire dist. Lors du développement, vous vous souciez uniquement de savoir si le code peut s'exécuter et être efficace. Vous n'avez pas besoin de savoir dans quoi le code est compilé.
mode de fabrication
Le mode de production est qu'une fois le code développé, nous devons l'obtenir et le déployer en ligne à l'avenir. Ce mode optimise principalement les performances d’exécution du code et la vitesse de packaging du code. Le webpack.config.js d'origine devient deux.
Répertoire de fichiers :
├── webpack-test (项目根目录)
├── config (Webpack配置文件目录)
│ ├── webpack.dev.js(开发模式配置文件)
│ └── webpack.prod.js(生产模式配置文件)
├── node_modules (下载包存放目录)
├── src (项目源码目录，除了html其他都在src里面)
│ └── 略
├── public (项目html文件)
│ └── index.html
├── .eslintrc.js(Eslint配置文件)
├── babel.config.js(Babel配置文件)
└── package.json (包的依赖管理配置文件)
Le répertoire des fichiers a changé, donc tous les chemins relatifs doivent revenir en arrière pour trouver les fichiers correspondants, et webpack.dev.js doit être modifié :
path: undefined, // 开发模式没有输出，不需要指定输出目录
// clean: true, // 开发模式没有输出，不需要清空输出结果
context: path.resolve(__dirname, "../src"),
template: path.resolve(__dirname, "../public/index.html"),
Instructions pour exécuter le mode développement :npx webpack serve --config ./config/webpack.dev.js
Modifiez webpack.prod.js :
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
mode: "production",
Instructions pour exécuter le mode production :npx webpack --config ./config/webpack.prod.js
Configurer les instructions d'exécution rapide
Afin de faciliter l'exécution des instructions dans différents modes, définissez les instructions dans les scripts dans package.json :
// package.json
{
// 其他省略
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
}
}
Instructions de démarrage ultérieur : (start n'a pas besoin d'être ajouté avec run, d'autres doivent être ajoutés)
Mode développement : npm startou npm run dev
mode production :npm run build
Gérer CSS séparément
Le fichier CSS est actuellement empaqueté dans un fichier js. Lorsque le fichier js est chargé, une balise de style sera créée pour générer le style. De cette façon, pour le site Web, il y aura un phénomène d'écran de démarrage et l'expérience utilisateur n'est pas Il devrait s'agir d'un fichier CSS séparé, grâce auquel les performances de chargement des balises Link sont meilleures.
1. Téléchargez le package : npm i mini-css-extract-plugin -D
2. Configurez webpack.prod.js :
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
{
test: /\.css$/,
// 将先前的"style-loader"替换成MiniCssExtractPlugin.loader
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
3. Exécutez la commande :npm run build
Gestion de la compatibilité CSS
1. Téléchargez le package : npm i postcss-loader postcss postcss-preset-env -D
2. Configurez webpack.prod.js :
rules:[
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"less-loader",
],
},
]
Lorsqu'il y a trop de configurations, le traitement de compatibilité ci-dessus sera légèrement redondant, il peut donc être résumé dans une fonction pour fusionner les configurations :
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
……
rules:[
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
]
3. Contrôler la compatibilité : vous pouvez ajouter une liste de navigateurs dans le fichier package.json pour contrôler l'étendue de la compatibilité des styles.
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
3. Exécutez la commande :npm run build
Compression CSS
1. Téléchargez le package : npm i css-minimizer-webpack-plugin -D
2. Configurez webpack.prod.js :
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [
// css压缩
new CssMinimizerPlugin(),
],
3. Exécutez la commande :npm run build
Le mode de production par défaut est déjà activé : compression html et compression js, aucune configuration supplémentaire n'est requise.