En mi carpeta pública tengo index.html, el archivo css y las fuentes . En mi carpeta de origen tengo el archivo index.js.
Así es como se ve la estructura de carpetas
He configurado el archivo webpack.config.js así
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: './', }), ], };Todo funciona bien en desarrollo, pero cuando creo la compilación, los archivos dentro de la carpeta pública, excepto index.html , no están incluidos.
Puede usar copyWebpackPlugin para mover los archivos de /public al nuevo destino de compilación ( /dist ).
Ejemplo:
const CopyPlugin = require("copy-webpack-plugin"); module.exports = { plugins: [ new CopyPlugin({ patterns: [ { from: "./public/*", to: "./" }, ], }), ], };Sin embargo, ¿cómo estás usando estos archivos CSS y Font? Webpack también debería ayudar a empaquetar su CSS correctamente junto con el resto de su código. Te recomiendo seguir la documentación oficial: Webpack .