Webpack - Compile two output bundles with different asset paths

Question

I'm trying to build a website using Webcomponents. The problem is, I need two different bundles with different paths to the images in CSS. The paths are saved in the CSS-Files and must remain relative.

This is the build pipline I'm currently using to generate the CSS sections.

...
test: /\.css|\.scss$/,
use: [
  {
    loader: 'polymer-css-loader',
    options: {
      minify: false
    }
  },
  'extract-loader',
  'css-loader',
  'postcss-loader',
  'sass-loader'
]
...

I can change the path using the file-loader to emit a public path to the images. The problem is, that I need one bundle using the original paths and one using another path.

...
test: /\.(png|gif|jpg|svg)$/,
use: [
  {
    loader: 'file-loader',
    options: {
      name: 'static/images/[name].[ext]',
      emitFile: false
    }
  }
]
...

Answer 1

You can pass two configs to webpack and configure file-loader acord your needs in each one:

    module.exports = [
        {
            entry: './example',
            output: {
                path: path.join(__dirname, "dist"),
                filename: 'app1.js'
            },
            module: {
                rules: [
                    {
                        test: /\.(png|gif|jpg|svg)$/,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: 'static/images/[name].[ext]',
                                    emitFile: false
                                }
                             }
                         ]
                      }

       },

       {
           entry: './example',
           output: {
               path: path.join(__dirname, "dist"),
               filename: 'app2.js'
           },
           module: {
               rules: [
                   {
                       test: /\.(png|gif|jpg|svg)$/,
                       use: [
                           {
                               loader: 'file-loader',
                               options: {
                                   name: 'static/other/path/images/[name].[ext]',
                                   emitFile: false
                                }
                            }
                         ]
            }

         }
]

More info https://github.com/webpack/webpack/tree/master/examples/multi-compiler