Webpack Cheatsheet

Webpack Module

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

Using Webpack Dev Server

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

CopyWebpackPlugin

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

Loading CSS

package.json

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

webpack.confg.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: {
	contentBase: '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