Webpack ist ein Opensource-JavaScript-Modul-Packer. Die wesentliche Aufgabe besteht darin, JavaScript-Dateien für die Nutzung im Browser zusammenzuführen und zu einer Datei zu bündeln;

https://webpack.js.org/

Um ein neues Projekt mit Hilfe von Webpack zu erstellen, ist es am einfachsten das von mir erstellte „webpack-starter“ Repository zu nutzen:

https://github.com/Sulkar/webpack-starter

Das Repository einfach clonen und dann „npm install“ ausführen.

Webpack Module

webpack cli

// installiert Webpack und Webpack CLI
npm install webpack webpack-cli --save-dev

webpack dev server

// installiert den Webpack Development Server
npm install webpack-dev-server --save-dev

Using Webpack Dev Server

copy webpack plugin

Copies individual files or entire directories, which already exist, to the build directory.

// installiert das Copy Plugin, um Dateien von z.B.: src nach dist zu kopieren
npm install copy-webpack-plugin --save-dev

const CopyPlugin = require("copy-webpack-plugin");
...
new CopyPlugin({
	patterns: [
        { from: "index.html", to: "" },
        { from: "images", to: "images" },
		...
	]
})

CopyWebpackPlugin

webpack style loader

// installiert den CSS Style Loader, der css minified und durch import nutzbar macht
npm install --save-dev style-loader css-loader

Loading CSS

mini css extract plugin

// installiert das Mini CSS Extract Plugin
npm install --save-dev mini-css-extract-plugin

concat files plugin

// installiert das concat files plugin
npm install --save-dev webpack-concat-files-plugin
...
const WebpackConcatPlugin = require("webpack-concat-files-plugin");

new WebpackConcatPlugin({
	bundles: [
		{
			dest: "./dist/js/1_start.min.js",
			src: ["./js/spin/spin.min.js", "./js/sanitizer/purify.min.js", ...],
        },
		...
	]
})

concat files plugin

package.json

// Startscripts welche mit "npm run ..." aufgerufen werden können. 
"scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode development"
  },

webpack.config.js

//Bündelt index.js und alle darin referenzierten Module und speichert das minified Ergebnis in main.js
const path = require('path');

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

//setzt das Root Verzeichnis des Webpack Development Servers auf einen Ordner
devServer: {
	static: 'dist',
},

//Kopiert eine Datei in den oben eingestellten "output" Ordner
//Hier wird die .wasm Datei nach "dist" kopiert.
const CopyPlugin = require("copy-webpack-plugin");
...
plugins: [
	new CopyPlugin({
		patterns: [
			{ from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: '' },
			{ from: 'src/images', to: 'images' },
		],
	}),
],

CopyWebpackPlugin

// Redirect module requests when normal resolving fails.
// Musste hier für sql.js eingestellt werden, da die Module nicht vorhanden/benötigt wurden.
...
resolve: {
	fallback: {
		"fs": false,
		"path": false,
		"crypto": false,
	}
},

Webpack – Resolve

// Nutzt den oben installierten CSS Loader
...
module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
},

Loading CSS