Comprendre brièvement le processus d'empaquetage du webpack

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement les problèmes liés au processus d'empaquetage de webpack. Webpack est un outil d'empaquetage de modules statiques pour les applications JavaScript modernes. Jetons-y un coup d'œil ensemble.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

webpack : est un outil d'empaquetage de modules statiques pour les applications JavaScript modernes. Lorsque Webpack traite une application, il crée en interne un graphe de dépendances à partir d'un ou plusieurs points d'entrée, puis combine chaque module requis dans votre projet en un ou plusieurs bundles, qui sont une ressource statique utilisée pour afficher votre contenu.

WebPack peut être considéré comme un packager de modules : il analyse la structure de votre projet, trouve des modules JavaScript et d'autres langages d'extension que les navigateurs ne peuvent pas exécuter directement (Sass, TypeScript, etc.) et les convertit en Emballé dans un format approprié pour être utilisé par le navigateur. Après l’émergence du 3.0, Webpack a également pris la responsabilité d’optimiser le projet.

Il y a trois points clés dans ce paragraphe :

• Packaging : plusieurs fichiers Javascript peuvent être regroupés en un seul fichier pour réduire la pression du serveur et la bande passante de téléchargement.

• Conversion : convertissez le langage étendu en JavaScript ordinaire pour permettre au navigateur de fonctionner correctement.

• Optimisation : à mesure que le front-end devient de plus en plus complexe, les performances rencontreront également des problèmes, et WebPack a également commencé à assumer la responsabilité de l'optimisation et de l'amélioration des performances

1. Créez un nouveau projet, puis exécutez-le. it

npm init

2. Installez webpack et webpack-cil globalement

npm install -g webpack

npm install -g webpack-cil

3 Installez webpack dans la dépendance du projet, afin de pouvoir utiliser la version locale de webpack

npm install webpack -save-dev

npm install webpack-cil -save-dev

4. .config .js, modifiez les paramètres par défaut

Fonction : C'est pour ne pas avoir à saisir l'adresse du répertoire à chaque fois que vous emballez, mais simplement webpack directement

const path = require('path');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

mode: 'development',

entry: './src/index.js', // 指定打包入口文件

output: {

filename: 'index.js', // 指定打包输出文件名

path: path.resolve(__dirname, './public'), // 指定打包输出路径

},

module: { // 对模块的处理逻辑

rules: [ // 一系列的加载器的处理逻辑

{

test: /\.css$/, // 正则 匹配到文件后缀

use: [

'style-loader',

'css-loader',

], // 用此加载器处理匹配到的文件

exclude: [ // 排除此文件夹下的文件

path.resolve(__dirname, './node_modules')

]

}

],

},

resolve: {

extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

minify: {

removeAttributeQuotes: true,

},

hash: true,

}),

new webpack.EnvironmentPlugin(

{

NODE_ENV: 'development',

TEST: 'true',

}

),

new CopyPlugin({

patterns: [

{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},

],

}),

],

// 配置webpack服务

devServer: {

port: 8000, // 启动服务监听端口

host: 'localhost', // 可以通过localhost访问

open: true, // 自动打开浏览器

hot: true, // 启动热更新

},

};

5 Installez HtmlWebpackPlugin

Ce plug-. in générera un HTML5 pour votre fichier, utilisez la balise script dans le corps pour présenter tous vos bundles générés par le webpack. Ajoutez simplement ce plug-in à la configuration de votre webpack

npm install --save-dev html-webpack-plugin

6. Installez CopyWebpackPlugin

Ce plug-in regroupe et copie les fichiers requis à l'endroit dont vous avez besoin. La raison pour laquelle j'ai installé ce plug-in est parce que j'ai terminé. typing Après le package, le CSS n'a pas été empaqueté avec succès. J'ai essayé de nombreuses méthodes mais j'ai toujours échoué. Je n'ai pu l'exécuter que manuellement pour copier le package CSS dans le passé

npm install copy-webpack-plugin --save-dev // 安装

// Utiliser from et to pour copier les fichiers dans. l'emplacement du formulaire vers l'emplacement

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

plugins: [

new CopyPlugin({

patterns: [

{ from: "source", to: "dest" },

{ from: "other", to: "public" },

],

}),

],

}; // webpack.config.js

7. Deux méthodes d'empaquetage

webpack --mode development // 开发模式 不压缩

webpack --mode production // 生产模式 压缩

8. Installez webpack-dev-server

npm install --save-dev webpack webpack-dev-server

const Webpack = require('webpack');

const WebpackDevServer = require('webpack-dev-server');

9. Après l'empaquetage, démarrez le projet :

"scripts": {

"test": "mocha",

"start": "webpack-dev-server",

"dev": "webpack --mode development"

},// 在package.json 里面进行配置

// 然后执行

npm run start // 项目启动&热更新

npm run dev // 再次打包

npm run test // 执行测试

[Recommandations associées. : Tutoriel vidéo Javascript, Web Front End】

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!