Webpack Image Path - wordpress

Question

I coded my site using Webpack. Everything works except the image's path. I'm used to write ../img/test.png for it work. I've researched other questions but none work.
My files are organized inside the dist folder of the wordpress theme.
Here's my webpack.config.js :
module.exports = {
mode: 'development',
entry: [
'./src/index.js'
],
devtool: "source-map", // any "source-map"-like devtool is possible
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test:/\.(s*)css$/,
use: [{
loader: "style-loader", options: {
sourceMap: true
}
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "resolve-url-loader", //resolve-url-loader needs to come *BEFORE* sass-loader
options: {
sourceMap: true
}
},{
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
plugins: [
new CopyWebpackPlugin([
{from:'assets/images',to:'images'}
])
],
watch: true,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
I've tried other url-loaders but nothing seems to work. Thanks in advance.

Answer 1

I figured it out. The public and output path were the most important things I had to learn. Since this was with Wordpress, the other answers weren't sufficient. The new config looks like:
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: [
'./src/index.js'
],
devtool: "source-map", // any "source-map"-like devtool is possible
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
publicPath: 'wp-content/themes/{{ THEME NAME }}/dist/images',
},
},
],
},
{
test:/\.(s*)css$/,
use: [{
loader: "style-loader", options: {
sourceMap: true
}
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
watch: true,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Hope this helps for anyone who is working through this.