Within my dist folder, you will find index.html, contact.html, index.js, contact.js, and two images referenced by my css as background images.
For example:
background-image: url("../images/prairie.jpg");
These are the only items in my dist folder. Any other images not mentioned in my css file are not loaded. These additional images are referenced solely within .js files (such as slideshow.js). The 'slideshow.js' file is a slideshow that does not display any images but instead shows a missing image icon. However, the background image previously mentioned ('../images/prairies.jpg') is displayed. All photos referenced in a css file are loaded into the dist folder, while those referenced only in a .js file and not a css file remain unloaded from the dist folder.
Below is my webpack.config.js:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');
const config = {
mode: 'development',
entry: {
index: './src/index.js',
contact:'./src/contact.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
disable: true,
},
},
],
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
chunks: ['index'],
filename: './index.html'
}),
new HtmlWebpackPlugin({
template: './contact.html',
inject: true,
chunks: ['contact'],
filename: './contact.html'
})
]
};
module.exports = config;