Webpack 5 [path] context

Question

With this rule :

  {
    test: /\.php$/,
    type: "asset/resource",
    generator: {
      filename: "[path][name][ext]",
    },
  },

My webpack config output files on this directory "views/src/views/client". I would like to remove the first two directory from the path.

Expected output path "views/client"

With webpack 4, this was working very well with file-loader.context option (views/src). I donc know how to do the same with the new asset/module features of webpack 5.

does any one has an idea?

Answer 1

I ran into the same problem when migrating.

I end up using a custom method to generate the filemane (as "recommended" by a Webpack member).

With webpack 4:

{
  test: /\.(jpg|png|gif|svg|ico)$/,
  exclude: /node_modules/,
  use: {
    loader: 'file-loader',
    options: {
      context: 'app/Resources/static',
      name: '[path][name].[ext]',
    }
  }
}

With webpack 5:

{
  test: /\.(jpg|png|gif|svg|ico)$/,
  exclude: /node_modules/,
  type: 'asset/resource',
  generator: {
    filename: content => {
      return content.filename.replace('app/Resources/static/', '')
    }
  }
}