webpack イメージを base64 に変換する例

 糸を追加 -D URLローダー
モジュール: {
  ルール:
       {
        テスト: /\.(jpeg|jpg|png|svg|gif)$/,
        使用： {
          loader: 'url-loader', // デフォルトは es6 モジュールです options: { // 設定 esModule: false, // common.js 仕様を使用します outputPath: 'images', // 出力ファイル ディレクトリ名: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 20k未満の場合はbase64に変換します
          }
        }
      }
  ]
}

// webpackはnodeをベースにしているので、module.exportsを使用します
定数パス = require("パス");

let HtmlWebpackPlugin = require("html-webpack-plugin"); // HTML テンプレートを生成する const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 各パッケージ化の前に dist をクリアする

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // CSSをマージ

// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // CSS を圧縮する

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新の圧縮された CSS

const TerserWebpackPlugin = require("terser-webpack-plugin"); // uglify の代わりに js を圧縮します。uglifyjs は es6 構文をサポートしていないため、uglifyjs-webpack-plugin の代わりに terser-webpack-plugin を使用します。

const webpack = require("webpack"); // 内部にグローバル変数を提供できる ProvidePlugin があります const commonCssConfig = [ // 共通 CSS 構成 MiniCssExtractPlugin.loader,
  「cssローダー」、
  {
    ローダー: "postcss-loader",
    オプション:
      //css互換性設定 postcssOptions: {
        プラグイン: [[require("postcss-preset-env")()]],
      },
    },
  },
];
// 共通 babel トランスコーダ設定 const babelConfig = {
  ローダー: 'babel-loader',
  オプション:
    プリセット: [
      "@babel/プリセット環境"
    ]、
    「プラグイン」: [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/プラグイン提案クラスのプロパティ"]
    ]
  }
}
// 共通プラグイン設定 const commonPlugin = [
  // html-webpack-プラグイン
  新しいHtmlWebpackプラグイン({
    template: "./src/index.html", // テンプレートを指定します filename: "index.html", // 出力ファイル名を指定します }),
  // new HtmlWebpackPlugin({ // 複数のテンプレート // template: './src/index.html', // テンプレートを指定 // filename: 'main.html', // 出力ファイル名を指定 // }),
  // クリーンなWebpackプラグイン
  new CleanWebpackPlugin(), // このプラグインを使用して、毎回 dist ディレクトリを生成する前に dist ディレクトリを削除します // mini-css-extract-plugin
  新しい MiniCssExtractPlugin({
    // CSS を抽出してパブリック フォルダーに配置します。ファイル名: "css/[name].[hash:4].css", // CSS パブリック ファイルをマージします }),
  // css-minimizer-webpack-プラグイン
  new CssMinimizerWebpackPlugin(), // 圧縮された CSS の新しいバージョン

  // terser-webpack-プラグイン
  新しいTerserWebpackPlugin({
    // js を圧縮する
    test: /\.js(\?.*)?$/i, //圧縮に関係するファイルを一致させる parallel: true, //複数のプロセスを同時に実行する terserOptions: {
      //簡潔な圧縮構成出力: { コメント: false },
      圧縮: {
        // pure_funcs: ["console.log"], // console.log を削除
      },
    },
    extractComments: true, // コメントを別のファイルに分割する }),
  // グローバル変数を挿入し、グローバルに使用します。新しい webpack.ProvidePlugin({ を導入する必要はありません。
    $:"jQuery"
  })
]

モジュール.エクスポート = {
  // 古いバージョンの圧縮された CSS
  // 最適化： {
  // 最小化ツール: [新しい OptimizeCssAssetsWebpackPlugin]
  // },
  //エントリ構成エントリ: "./src/index.js",
  // モード設定 mode: "production", // モードを指定します。デフォルトはproductionモードです。開発モードはコードの表示に便利です // 設定出力をエクスポートします: {
    path: path.resolve(__dirname, "dist"), // __dirname はルートディレクトリを表します M:\47-webpack-study\01-webpack\dist
    filename: "js/[name].[hash:4].js", //出力ファイル名を指定します // [name]は動的な名前で、キャッシュを避けるためのハッシュ値が追加されます。デフォルトは20桁のハッシュ値です /* 
     ハッシュの役割:
     たとえば、初めてパッケージ化する場合、ファイルはブラウザによってキャッシュされます。2 回目にパッケージ化する場合、ファイル名が変更されていないと、ブラウザは最新のコードをダウンロードしないため、ハッシュが役立ちます。ハッシュはコンテンツ ハッシュ値とも呼ばれます。コンテンツが変更される限り、ハッシュは変更され、キャッシュされず、常に最新の状態に保たれます*/
  },
  // webpack-dev-server は devServer を設定します: {
    host: "localhost", // ホスト port: "9527", // ポート open: true, // 自動的に開く historyApiFallback: true, // ページが見つからない場合は、デフォルトで index.html にジャンプします
    compressed: true, //すべてのサービスに対してgzip圧縮を有効にする hot: true, //ホットアップデートを開始する proxy: {
      // プロキシ設定 "/api": {
        ターゲット: "http:localhost:5000",
        変更元: true、
      },
    },
  },
  // ローダー構成モジュール: {
    ルール:
      {
        テスト: /\.html$/,
        use: 'html-withimg-loader', //HTML で画像を使用するためのプラグイン},
      {
        テスト: /\.js$/,
        使用: babelConfig // babelトランスコーダ設定},
      {
        テスト: /\.css$/,
        使用法: [...commonCssConfig], // CSS の順序は右から左、下から上です},
      {
        テスト: /\.less$/,
        使用方法: [...commonCssConfig,'less-loader'], // less の順序は右から左、下から上です},
      {
        テスト: /\.scss$/,
        使用方法: [...commonCssConfig,"sass-loader"], // sass の順序は右から左、下から上です},
      // {
      // テスト: /\.(jpeg|jpg|png|svg|gif)$/,
      // 使用： {
      // loader: 'file-loader', // デフォルトでは es6 モジュールが使用されます // options: { // 構成 // esModule: false, // common.js 仕様を使用します // outputPath: 'images', // 出力ファイル ディレクトリ // name: 'images/[contenthash:4].[ext]',
      // }
      // }
      // }
      {
        テスト: /\.(jpeg|jpg|png|svg|gif)$/,
        使用： {
          loader: 'url-loader', // デフォルトは es6 モジュールです options: { // 設定 esModule: false, // common.js 仕様を使用します outputPath: 'images', // 出力ファイル ディレクトリ名: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 20k未満の場合はbase64に変換します
          }
        }
      }
    ]、
  },
  // プラグイン設定 plugins: [...commonPlugin],
  // サードパーティのパッケージを除外する externals: {
    jQuery: '$',
  }
};