In Webpack 3 how can I generate a different CSS URL when built?

Question

I am trying to output a different URL for my background images when my project is built.

My current CSS image path is:

./src/components/assets/images....

What I want when built:

/images/default-source/images/icon.png

I have tried different things such as options within the css-loader but none of them have worked. Usually, it will cause a problem when running the project as It can't find the images.

Directories:

/build/main.css
/src/components/assets/css/main.css
/src/components/assets/images/

/webpack.config.js

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { 
        loader: 'css-loader',
        options: { 
          url: false ,
        }
      },
      { 
        loader: 'postcss-loader' 
      },
      { 
        loader: 'sass-loader',
      },
    ],
  }),
},

I have thought maybe using some sort of find and replace during the build. What is the best solution?

Answer 1

try to add this on your webpack.config.js or during the build of your app

npm run build --output-public-path='/images/default-source/'

No sure if webpack 3 still accept didn't tested, regards