Tùy chỉnh đường dẫn đến tệp assets trong Webpack

Bạn có thể thiết lập đường dẫn đến các tệp assets trong thư mục build. Việc này được thực hiện bằng cấu hình assetModuleFilename. Trong cấu hình này, chúng ta có thể chỉ định thư mục, nơi các assets được lưu trữ, cũng như mẫu tên tệp.

Trong mẫu tên, lệnh [name] biểu thị tên tệp, lệnh [hash] - hash, và lệnh [ext] - phần mở rộng của tệp gốc.

Vậy, hãy thực hiện cấu hình:

webpack.config.jsexport default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
    assetModuleFilename: 'assets/[name].[hash][ext]', // cấu hình của chúng ta
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};