Tài sản chung trong Webpack

Bây giờ hãy thử làm việc với các tài sản chung. Hãy thiết lập để các hình ảnh nhỏ hơn 8kb được chuyển thành base64, còn các hình ảnh lớn hơn kích thước này sẽ được sao chép vào file:

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(),
  ],
};

Có thể thay đổi giới hạn về kích thước hình ảnh. Ví dụ, đặt giới hạn là 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(),
  ],
};