Beispiel für die Konvertierung von Webpack-Bildern in Base64

 yarn add -D URL-Lader
Modul: {
  Regeln:
       {
        Test: /\.(jpeg|jpg|png|svg|gif)$/,
        verwenden: {
          loader: 'url-loader', // Der Standard ist es6 module options: { // Konfigurieren Sie esModule: false, // Verwenden Sie die common.js-Spezifikation outputPath: 'images', // Name des Ausgabedateiverzeichnisses: 'images/[contenthash:4].[ext]',
            Limit: 20*1024 // In Base64 konvertieren, wenn weniger als 20 KB
          }
        }
      }
  ]
}

// webpack basiert auf node, also verwenden Sie module.exports
const path = require("Pfad");

let HtmlWebpackPlugin = require("html-webpack-plugin"); // HTML-Vorlage generieren const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // dist vor jedem Verpacken löschen

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // CSS zusammenführen

// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // CSS komprimieren

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // Neuestes komprimiertes CSS

const TerserWebpackPlugin = require("terser-webpack-plugin"); // Komprimiere js statt uglify. Da uglifyjs die es6-Syntax nicht unterstützt, verwende terser-webpack-plugin statt uglifyjs-webpack-plugin.

const webpack = require("webpack"); // Darin befindet sich ein ProvidePlugin, das globale Variablen bereitstellen kann const commonCssConfig = [ // Allgemeine CSS-Konfiguration MiniCssExtractPlugin.loader,
  "CSS-Lader",
  {
    Lader: "postcss-loader",
    Optionen:
      //CSS-Kompatibilitätskonfiguration postcssOptions: {
        Plugins: [[require("postcss-preset-env")()]],
      },
    },
  },
];
// Allgemeine Babel-Transcoder-Konfiguration const babelConfig = {
  Lader: 'babel-loader',
  Optionen:
    Voreinstellungen: [
      "@babel/Vorgabe-Umgebung"
    ],
    "Plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-vorschlag-klasseneigenschaften"]
    ]
  }
}
// Allgemeine Plugin-Konfiguration const commonPlugin = [
  // html-Webpack-Plugin
  neues HtmlWebpackPlugin({
    Vorlage: "./src/index.html", // Geben Sie den Vorlagendateinamen an: "index.html", // Geben Sie den Ausgabedateinamen an }),
  // neues HtmlWebpackPlugin({ // Mehrere Vorlagen// Vorlage: './src/index.html', // Vorlage angeben// Dateiname: 'main.html', // Ausgabedateinamen angeben// }),
  // sauberes Webpack-Plugin
  neues CleanWebpackPlugin(), // Verwenden Sie dieses Plugin, um das Dist-Verzeichnis jedes Mal zu löschen, bevor das Dist-Verzeichnis generiert wird // mini-css-extract-plugin
  neues MiniCssExtractPlugin({
    // CSS extrahieren und in den öffentlichen Ordner mit dem Dateinamen „css/[name].[hash:4].css“ legen, // Öffentliche CSS-Dateien zusammenführen }),
  // CSS-Minimizer-Webpack-Plugin
  new CssMinimizerWebpackPlugin(), // Neue Version des komprimierten CSS

  // terser-webpack-plugin
  neues TerserWebpackPlugin({
    // js komprimieren
    test: /\.js(\?.*)?$/i, //An der Komprimierung beteiligte Dateien abgleichen parallel: true, //Mehrere Prozesse gleichzeitig ausführen lassen terserOptions: {
      //Ausgabe der Terser-Komprimierungskonfiguration: { comments: false },
      komprimieren: {
        // pure_funcs: ["console.log"], // console.log entfernen
      },
    },
    extractComments: true, // Kommentare in separate Dateien entfernen }),
  // Globale Variablen einfügen und global verwenden. Es ist nicht nötig, ein neues webpack.ProvidePlugin({ einzuführen.
    $:"jquery"
  })
]

modul.exporte = {
  // Alte Version komprimiertes CSS
  // Optimierung: {
  // Minimierer: [neues OptimizeCssAssetsWebpackPlugin]
  // },
  //Eintragskonfigurationseintrag: "./src/index.js",
  // Moduskonfigurationsmodus: „Produktion“, // Modus angeben, der Standard ist der Produktionsmodus, der Entwicklungsmodus ist praktisch zum Anzeigen von Code // Konfigurationsausgabe exportieren: {
    Pfad: path.resolve(__dirname, "dist"), // __dirname stellt das Stammverzeichnis M:\47-webpack-study\01-webpack\dist dar
    Dateiname: "js/[name].[hash:4].js", //Geben Sie den Namen der Ausgabedatei an // [name] ist ein dynamischer Name plus der Hashwert, um das Zwischenspeichern zu vermeiden. Der Standardwert ist ein 20-stelliger Hashwert /* 
     Die Rolle von Hash:
     Wenn Sie beispielsweise zum ersten Mal packen, wird die Datei vom Browser zwischengespeichert. Wenn Sie zum zweiten Mal packen und der Dateiname unverändert bleibt, lädt der Browser nicht den neuesten Code herunter, sodass der Hash ins Spiel kommt. Der Hash wird auch als Inhalts-Hashwert bezeichnet. Solange sich der Inhalt ändert, ändert sich der Hash und wird nicht zwischengespeichert, sodass er jederzeit auf dem neuesten Stand bleibt*/
  },
  // webpack-dev-server konfiguriert devServer: {
    Host: "localhost", // Host-Port: "9527", // Port geöffnet: true, // HistoryApiFallback automatisch öffnen: true, //Wenn die Seite nicht gefunden wird, standardmäßig zu index.html springen
    compress: true, //Gzip-Komprimierung für alle Dienste aktivieren hot: true, //Hot-Update starten Proxy: {
      // Proxy-Konfiguration "/api": {
        Ziel: "http:localhost:5000",
        changeOrigin: wahr,
      },
    },
  },
  // Loader-Konfigurationsmodul: {
    Regeln:
      {
        Test: /\.html$/,
        use: 'html-withimg-loader', //Plugin zur Verwendung von Bildern in HTML},
      {
        Test: /\.js$/,
        verwenden: babelConfig // Babel-Transcoder-Konfiguration},
      {
        Test: /\.css$/,
        use: [...commonCssConfig], // Die CSS-Reihenfolge ist von rechts nach links, von unten nach oben},
      {
        Test: /\.less$/,
        use: [...commonCssConfig,'less-loader'], // Die Reihenfolge von less ist von rechts nach links und von unten nach oben},
      {
        Test: /\.scss$/,
        use: [...commonCssConfig,"sass-loader"], // Die Reihenfolge von Sass ist von rechts nach links und von unten nach oben},
      // {
      // Test: /\.(jpeg|jpg|png|svg|gif)$/,
      // verwenden: {
      // loader: ‚file-loader‘, // es6-Modul wird standardmäßig verwendet // options: { // Konfiguration // esModule: false, // common.js-Spezifikation verwenden // outputPath: ‚images‘, // Ausgabedateiverzeichnis // Name: ‚images/[contenthash:4].[ext]‘,
      // }
      // }
      // }
      {
        Test: /\.(jpeg|jpg|png|svg|gif)$/,
        verwenden: {
          loader: 'url-loader', // Der Standard ist es6 module options: { // Konfigurieren Sie esModule: false, // Verwenden Sie die common.js-Spezifikation outputPath: 'images', // Name des Ausgabedateiverzeichnisses: 'images/[contenthash:4].[ext]',
            Limit: 20*1024 // In Base64 konvertieren, wenn weniger als 20 KB
          }
        }
      }
    ],
  },
  // Plugin-Konfiguration plugins: [...commonPlugin],
  // Externe Pakete von Drittanbietern ausschließen: {
    jQuery: "$",
  }
};