Κοινά Assets στο Webpack

Ας δοκιμάσουμε τώρα τα κοινά assets. Ας κάνουμε τις εικόνες μικρότερες από 8kb να μετατρέπονται σε base64, ενώ οι εικόνες μεγαλύτερες από αυτό το μέγεθος να αντιγράφονται σε αρχείο:

webpack.config.jsexport default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

Μπορούμε να αλλάξουμε το όριο στο μέγεθος της εικόνας. Για παράδειγμα, ας ορίσουμε όριο στα 4kb:

webpack.config.jsexport default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};