Verstehen Sie kurz den Webpack-Verpackungsprozess

Dieser Artikel bringt Ihnen relevantes Wissen über Javascript, das hauptsächlich Probleme im Zusammenhang mit dem Webpack-Paketierungsprozess vorstellt. Webpack ist ein statisches Modul-Paketierungstool für moderne JavaScript-Anwendungen. Ich hoffe, es ist hilfreich für alle.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Webpack: ist ein Statisches Modul-Paketierungstool für moderne JavaScript-Anwendungen. Wenn Webpack eine Anwendung verarbeitet, erstellt es intern ein Abhängigkeitsdiagramm von einem oder mehreren Einstiegspunkten und kombiniert dann jedes in Ihrem Projekt erforderliche Modul in einem oder mehreren „Bundles“: Es handelt sich um eine statische Ressource, die zum Anzeigen Ihrer Inhalte verwendet wird. WebPack kann als Modulpaketierer betrachtet werden: Es analysiert Ihre Projektstruktur, findet JavaScript-Module und andere Erweiterungssprachen, die Browser nicht direkt ausführen können (Sass, TypeScript usw.) und konvertiert sie in In ein geeignetes Format zur Verwendung durch den Browser verpackt. Nach dem Erscheinen von 3.0 übernahm Webpack auch die Verantwortung für die Optimierung des Projekts.

In diesem Absatz gibt es drei wichtige Punkte:

Paketierung: Mehrere Javascript-Dateien können in eine Datei gepackt werden, um den Serverdruck und die Download-Bandbreite zu verringern.
Konvertierung: Konvertieren Sie die erweiterte Sprache in normales JavaScript, damit der Browser reibungslos funktioniert.
Optimierung: Da das Frontend immer komplexer wird, treten auch Leistungsprobleme auf, und WebPack hat auch begonnen, die Verantwortung für die Optimierung und Verbesserung der Leistung zu übernehmen

1 Erstellen Sie ein neues Projekt und führen Sie es dann aus it

npm init

2. Installieren Sie Webpack und Webpack-cil global

npm install -g webpack

npm install -g webpack-cil

3. Installieren Sie Webpack in der Projektabhängigkeit, damit Sie die lokale Version von Webpack verwenden können

4 .config .js, ändern Sie die Standardeinstellungen

Funktion: Dies dient der Bequemlichkeit, nicht jedes Mal die Verzeichnisadresse eingeben zu müssen, sondern einfach direkt webpacken zu müssen

npm install webpack -save-dev

npm install webpack-cil -save-dev

5 Installieren Sie HtmlWebpackPlugin

Dieses Plug-in. in generiert eine HTML5-Datei für Ihre Datei. Verwenden Sie das -Tag im Textkörper, um alle Ihre Webpack-generierten Bundles vorzustellen. Fügen Sie einfach dieses Plug-in zu Ihrer Webpack-Konfiguration hinzu.

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, // 启动热更新

},

};

Beim Eingeben des Pakets wurde das CSS nicht erfolgreich gepackt, aber ich konnte dies nur manuell ausführen, um das CSS-Paket in die Vergangenheit zu kopieren der Formularspeicherort zum Zielort

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

7. Zwei Verpackungsmethoden script

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

8. Nach dem Packen das Projekt starten: : Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonVerstehen Sie kurz den Webpack-Verpackungsprozess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!