Structure:
├───assets │ ├───scss │ ├───js │ ├───img │ ├───plugins │ └───index.html ├───dist │ ├───css │ ├───img │ ├───js │ └───index.html └───webpack.config.js index.html
<img src="img/exapmle.jpg" alt="exapmle"> main.sass
.home background: url("../img/example.jpg") webpack.config.js
module: { rules: [ { test: /\.(jpg|png|svg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', publicPath: 'img', outputPath: 'img', useRelativePath: true } }, { loader: 'image-webpack-loader', ... } } ] } ] }, On production in dist, I see only a picture from html, if I change to publicPath: '../', I do not see it in css
I tried the solution
publicPath: function(url) { return url.replace(../, '/img/') }, 