In my public folder I have index.html, the css file and the fonts. In my source folder I have the index.js file.
This is how the folder structure looks
I have setup the webpack.config.js file like this
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/transform-runtime'],
},
},
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
exclude: /node_modules/,
use: 'file-loader',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
exclude: /node_modules/,
use: 'url-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index.html'),
publicPath: './',
}),
],
};
Everything is working fine in dev, but when I create the build the files inside the public folder except the index.html are not included.
You can use the copyWebpackPlugin to move the files from /public to the new build destination (/dist).
Example:
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "./public/*", to: "./" },
],
}),
],
};
However, how are you using this CSS and Font files? Webpack should also help to pack your CSS correctly along with the rest of your code. I recommend you to follow the oficial documentation: Webpack.