I have a react app build in webpack and deployed after generating the build into /dist folder. In local build I can see the below folder structure
But when I deploy the build to netlify drop pane, I don’t see the assets folder.
I assume it is taking the index.html
from my src/
when rendering the content instead of index.html
in dist because of which **
images are not loading in the app
**.
Here’s my webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: ["./src/index.js", "@babel/polyfill"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
],
},
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 10000,
},
},
],
},
{
test: /\.(gif|png|jpe?g)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets/images/",
},
},
],
},
],
// loaders: [{ test: /\.jsx?$/, loader: 'babel' }],
},
devServer: {
host: "192.168.1.10", //your ip address,
// host: '0.0.0.0', //your ip address,
historyApiFallback: true,
contentBase: "././src",
port: 8080,
disableHostCheck: true,
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js",
publicPath: "/",
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve("./dist/index.html"),
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "/src/assets/images"),
to: path.resolve(__dirname, "dist"),
},
],
}),
],
devServer: {
// contentBase: './dist',
contentBase: "./build",
hot: true,
},
};
Here’s a stackoverflow link for the same issue
Please guide…