javascript - Webpack: how to export css file from css-loader? -

i have app structure this:

/src     /app.js     /styles.css     /images            /img.png 

the app.js file content is:

const styles = require('./styles.css'); console.log(styles) // => here want have url css file under public folder 

the src/styles.css file content follows:

.element {   background: url(./images/img.png); } 

so, js file requires css file. , css file requires png file.

i want files exported public folder:

public/app.js

const styles = 'styles.css' // => path public/styles.css console.log(styles) 

pubic/styles.css

.element {   background: url(img.png); /* path public image file */ } 

public/img.png (source image copy)

the filenames not important. public folder output important. css file exported separate file, contains proper path image. js file knows path of public css file.

if there no image present, file-loader used import css file. in case css file has first processed css-loader in order resolve url() path.

applying css-loader before file-loader breaks things because returns js code instead of css.

is there way build pipe achieve wanted result?

i think looking extract text plugin. name may sound little… off, described.

you can use multiple loaders resolve image paths, process scss, autoprefix properties etc.