Clever Geek Handbook

Webpack 5 von Grund auf neu einrichten





Erfahren Sie, wie Sie mit dem Webpack JavaScript, Bilder, Schriftarten und Stile



erstellen und den Entwicklungsserver ausführen. Wenn Sie Webpack 4 bereits verwendet haben, sind hier einige Unterschiede zu Version 5 aufgeführt:



  • Der Befehl "webpack-dev-server" sieht jetzt wie "webpack-serve" aus.
  • Eine separate Installation von File-Loader, Raw-Loader und URL-Loader ist nicht mehr erforderlich. Sie können die integrierten Asset-Module verwenden
  • Node.js , , , stream, «stream-browserify» { stream: «stream-browserify» }


?



Zum größten Teil werden Websites nicht mehr in reinem HTML mit wenig JavaScript geschrieben - oft werden sie nur mit JavaScript erstellt. Daher muss der Code zusammengestellt, minimiert und transpiliert werden. Hier bietet sich das Webpack an.



Webpack ist ein Modul- Builder . Es wird verwendet, um den Code für die Verwendung durch den Browser zu verpacken. Sie können das neueste JavaScript mit Babel nutzen oder TypeScript verwenden und es kompilieren, um browserübergreifenden minimierten Code zu erstellen. Außerdem können Sie statische Ressourcen in JavaScript importieren.



Für Entwickler bietet das Webpack auch einen Entwicklungsserver, der Module und Stile im laufenden Betrieb aktualisieren kann, wenn die Datei gespeichert wird. Befehlszeilentools wie "vue create" und "react-create-app" verwenden das Webpack hinter den Kulissen. Sie können jedoch problemlos Ihr eigenes Webpack-Setup für diese Frameworks erstellen.



Webpack kann auch viele andere Dinge tun, aber dieser Artikel behandelt die Grundlagen der Einrichtung und Verwendung.



Installation



Erstellen Sie ein Projektverzeichnis und initialisieren Sie es: 



mkdir webpack-tutorial
cd !$
// 
cd webpack-tutorial
yarn init -yp  //     "package.json"
// 
npm init -y


Installieren Sie webpack und webpack-cli als Entwicklungsabhängigkeiten: 



yarn add -D webpack webpack-cli
// 
npm i -D webpack webpack-cli




Erstellen Sie ein Verzeichnis "src" zum Speichern von Anwendungsdateien. Ich beginne mit der Erstellung einer einfachen "index.js" -Datei: 



console.log(" !")


Großartig, wir haben ein Node.js-Projekt mit den installierten Hauptpaketen und einer "index.js" -Datei. Beginnen wir mit der Konfiguration des Webpacks.



Grundeinstellung



Beginnen wir mit der Konfiguration des Kollektors. Erstellen Sie eine Datei "webpack.config.js" im Stammverzeichnis des Projekts.



Eingangspunkt


Zunächst müssen Sie den Einstiegspunkt der Anwendung definieren, d. H. Welche Dateien wird das Webpack kompilieren? Im obigen Beispiel definieren wir den Einstiegspunkt als "src / index.js": 



// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}


Ausstiegspunkt


Der Exit-Punkt ist das Verzeichnis, in dem die vom Webpack kompilierten Dateien abgelegt werden. Setzen Sie den Austrittspunkt auf "dist". Das Präfix "[Name]" entspricht dem Dateinamen in src: 



// webpack.config.js
module.exports = {
    // ...

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}


Das minimale Setup für die Erstellung des Projekts ist fertig. Fügen Sie das Skript "build" zur Datei "package.json" hinzu, in der der Befehl "webpack" ausgeführt wird: 



// package.json
"scripts": {
    "build": "webpack"
}


Starten Sie das Webpack: 



yarn build
// 
npm run build



asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss


Die Datei "index.bundle.js" wird im Verzeichnis "dist" erstellt. Die Datei hat sich nicht geändert, aber wir haben das Projekt erfolgreich erstellt.



Plugins



Die Plugin- Oberfläche macht das Webpack sehr flexibel. Plugins werden sowohl vom Webpack selbst als auch von Erweiterungen von Drittanbietern verwendet. Einige Plugins werden in fast jedem Projekt verwendet.



Auf HTML-Vorlagen basierendes Plugin


Wir haben eine fertige Assembly, die jedoch ohne Markup unbrauchbar ist, wodurch die Assembly als Skript geladen wird. Da eine solche HTML-Datei automatisch generiert werden soll, verwenden wir das HTML-Webpack-Plugin.





Installieren Sie das Plugin: 



yarn add -D html-webpack-plugin


Erstellen Sie eine "template.html" -Datei im Verzeichnis "src". Wir können der Vorlage Variablen und andere Informationen hinzufügen. Fügen Sie die Variable "title" hinzu, andernfalls sieht die Vorlage wie eine normale HTML-Datei mit einem Container mit der Kennung "root" aus: 



<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>


Fügen Sie die Eigenschaft "Plugins" zu den Webpack-Einstellungen hinzu, in denen wir das Plugin, den Namen der Ausgabedatei (index.html) und die Vorlage definieren: 



// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // 
            filename: 'index.html', //   
        }),
    ],
}


Wir beginnen mit der Montage. Das Verzeichnis "dist" enthält jetzt die Datei "index.html" mit dem darin enthaltenen Skript. Cool! Wenn Sie diese Datei in einem Browser öffnen, wird die Meldung "Wie interessant!" Angezeigt. in der Konsole.



Fügen wir dem DOM einige Inhalte hinzu. Lassen Sie uns den Inhalt der Datei "index.js" ändern und die Assembly neu starten. 



// index.js
//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//    DOM
const root = document.querySelector('#root')
root.append(heading)


Gehen Sie in das Verzeichnis "dist" und starten Sie den Server (dazu müssen Sie den http-Server global installieren : yarn global add http-server oder npm i -g http-server). 



http-server


In der sich öffnenden Browser-Registerkarte sollte eine Überschrift mit der Aufschrift "Wie interessant!" Beachten Sie auch die Verringerung der Dateigröße.



Reinigung


Installieren Sie das Clean-Webpack-Plugin, das jedes Mal, wenn das Projekt erstellt wird, das Verzeichnis "dist" bereinigt. Auf diese Weise können Sie alte Dateien, die nicht mehr benötigt werden, automatisch löschen. 





// webpack.config.js
const HtmlWebpackPlugin = require('html=webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        // ...
        new CleanWebpackPlugin(),
    ],
}


Module und Lader



Das Webpack verwendet Loader , um von Modulen geladene Dateien zu analysieren . Dies können JavaScript-Dateien, statische Ressourcen wie Bilder oder Stile sowie Compiler wie TypeScript und Babel sein. Webpack 5 verfügt über mehrere integrierte Ressourcenlader.



Unser Projekt hat eine HTML-Datei, die ein Skript lädt, aber sonst nichts. Überlegen wir uns, was wir vom Sammler wollen.



  • Kompilieren Sie die neuesten JavaScript-Funktionen in Code, der mit allen oder den meisten Browsern kompatibel ist
  • Stile importieren und SCSS in CSS konvertieren
  • Bilder und Schriftarten importieren
  • Anpassen von React oder Vue (optional)


Lassen Sie uns zunächst Babel zum Kompilieren von JavaScript einrichten.



Babel (JavaScript)


Babel ist ein Tool, um zukünftiges JavaScript heute zu aktivieren.



Wir werden eine Regel definieren, nach der alle js-Dateien in einem Projekt (mit Ausnahme der im Verzeichnis node_modules enthaltenen Dateien) mit babel-loader transpiliert werden. Babel benötigt mehrere Abhängigkeiten, um zu funktionieren: 





yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    }
}


Wenn Sie ein TypeScript-Projekt einrichten, sollten Sie für alle JavaScript-Dateien, die transpiliert werden müssen, den Typenskript-Loader anstelle des Babel-Loaders verwenden. Sie überprüfen Dateien mit der Erweiterung "ts" und verwenden den ts-loader.



Also ist Babel eingerichtet, aber das Plugin ist noch nicht da. Sie können dies überprüfen, indem Sie den folgenden Code oben in index.js einfügen: 



// index.js
//     
class Game {
    name = 'Violin Charades'
}
const myGame = new Game()

//  
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//      DOM
const root = document.querySelector('#root')
root.append(heading, p)



ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }


Um dies zu beheben, erstellen Sie eine ".babelrc" -Datei im Stammverzeichnis des Projekts: 



// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}


Wir beginnen den Bau mit dem Garnbau. Alles funktioniert jetzt.



Bilder


Wir möchten Bilder in eine JavaScript-Datei importieren, JavaScript kann dies jedoch nicht. Um dies zu überprüfen, erstellen wir ein Verzeichnis "src / images", platzieren dort ein Bild und versuchen, es in die Datei "index.js" zu importieren: 



// index.js
import example from './images/example.png'

// ...


Beim Starten des Builds wird eine Ausnahme ausgelöst: 



ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders


Wie bereits erwähnt, verfügt das Webpack über einige integrierte Downloader für die Verarbeitung statischer Dateien. Verwenden Sie für Bilder den Typ "Asset / Ressource". Bitte beachten Sie, dass es sich um den Typ (Typ) und nicht um den Lader (Lader) handelt: 



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // 
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
}


Eine neue Datei wird im Verzeichnis "dist" angezeigt.



Schriftarten und andere eingebettete Daten


Das Webpack verfügt außerdem über ein integriertes Modul zur Verarbeitung einiger eingebetteter Daten wie Schriftarten und SVG. Dazu reicht es aus, den Typ "Asset / Inline" anzugeben: 



// index.js
import example from './images/example.svg'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            //   SVG
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
}


Stile


Die Verwendung von Style Loadern ist eine Voraussetzung für die Verwendung von Zeichenfolgen wie "import 'file.css'" in Ihrem Skript.



Viele Benutzer verwenden CSS-in-JS , gestaltete Komponenten und andere Tools, mit denen JavaScript formatiert werden kann.



Manchmal können wir uns darauf beschränken, eine CSS-Datei zu laden. Vielleicht möchten Sie aber PostCSS verwenden , das die neuesten CSS-Funktionen im Browser ermöglicht. Oder wollen Sie das verwenden möchten Sass Präprozessor .



Ich möchte alle drei verwenden - Code in Sass schreiben, mit PostCSS verarbeiten und in CSS kompilieren. 





yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass


Wie bei Babel benötigt PostCSS eine separate Konfigurationsdatei: 



// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}


Um die Funktionalität der genannten Tools zu testen, erstellen wir eine Datei "src / styles / main.scss" mit Sass-Variablen und einem Beispiel für die Verwendung von PostCSS (lch): 



// src/styles/main.css
$font-size: 1rem;
$font-color: lch(53 105 40);

html {
    font-size: $font-size;
    color: $font-color;
}


Wir importieren diese Datei in index.js und fügen 4 Loader hinzu. Loader werden vom Webpack von rechts nach links verwendet, daher sollte der letzte Sass-Loader, dann PostCSS, dann CSS und schließlich Style-Loader sein, der kompilierte Stile auf DOM-Elemente anwendet: 



// index.js
import './styles/main.css'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
}


Nach dem Erstellen werden Sie feststellen, dass Sass und PostCSS auf das DOM angewendet wurden.



Bitte beachten Sie, dass wir die Einstellungen für den Entwicklungsmodus festgelegt haben. Verwenden Sie für die Produktion MiniCssExtractPlugin anstelle von Style-Loader, der minimiertes CSS exportiert.



Entwicklung von



Das Eingeben des Garnaufbaus (npm run build) jedes Mal, um das Projekt neu aufzubauen, kann mühsam sein. Je größer das Projekt, desto länger dauert der Bau. Daher benötigen Sie zwei Webpack-Konfigurationsdateien:



  • Produktionseinstellungen, einschließlich Minimierung, Optimierung und Entfernung aller Ressourcenkarten (Quellkarten)
  • Entwicklungseinstellungen, einschließlich Serverstart, Aktualisierung bei jeder Änderung und Ressourcenzuordnungen


Anstatt ein "dist" -Verzeichnis zu erstellen, kann der Entwicklungsmodus erwarten, dass die benötigten Informationen im Speicher gespeichert werden.



Dazu müssen Sie den webpack-dev-server installieren. 





yarn add -D webpack-dev-server


Um zu demonstrieren, wie ein Server für die Entwicklung verwendet wird, können wir die entsprechenden Einstellungen in der Datei "webpack.config.js" definieren. In der Praxis ist es am besten, zwei Konfigurationsdateien zu haben, eine mit Modus: Produktion und eine mit Modus: Entwicklung. In dem speziell für Sie vorbereiteten Webpack 5-Boilerplate verwende ich Webpack-Merge, um die Grundeinstellungen in einer einzigen Datei abzurufen. Die besonderen Anforderungen sind in den Dateien "webpack.prod.js" und "webpack.dev.js" enthalten. 



// webpack.config.js
const webpack = require('webpack')

module.exports = {
    // ...
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        // ...
        //      
        new webpack.HotModuleReplacement(),
    ],
}


Wir haben mode: development und eine "devServer" -Eigenschaft hinzugefügt. Diese Eigenschaft enthält mehrere Standardeinstellungen - Portnummer (8080), automatisches Öffnen des Browsers, Verwendung des Hot-Module-Ersatzes , für den webpack.HotModuleReplacement () erforderlich ist. Dadurch können die Module ohne erneutes Laden der gesamten Seite aktualisiert werden, d. H. Wenn sich einzelne Stile ändern, nur sie aktualisiert werden, müssen Sie JavaScript nicht neu laden, was die Entwicklung erheblich beschleunigt.



Verwenden Sie zum Starten des Servers den Befehl "webpack serve": 



// package.json
"scripts": {
    "start": "webpack serve"
}



yarn start


Nach dem Ausführen dieses Befehls wird der Browser unter localhost: 8080 geöffnet. Jetzt können Sie Sass und JavaScript ändern und sie werden sofort aktualisiert.



Fazit



Ich hoffe, dieser Artikel hat Ihnen geholfen, mit dem Webpack zu beginnen. Um die Lösung Ihrer täglichen Aufgaben zu vereinfachen, habe ich ein Webpack 5-Boilerplate mit Babel, Sass, PostCss, Optimierung für die Produktion und einem Server für die Entwicklung entwickelt. Auf dieser Grundlage können Sie Ihr Webpack einfach für die Verwendung mit React, Vue oder TypeScript konfigurieren.


More articles:


All Articles