Search code examples
javascriptreactjswebpackwebpack-style-loader

images not showing when opening index.html from dist folder

I am using webpack 4.8 with react for automating few tasks for production environment.

Currently in my /dist folder I have index.hml, bundler.css, bundler.js but I don't know if I also need to copy assets folder into /dist folder using webpack or shall I just reference from my /dist/index.html into /src/assets/img using some constant as absolute path (define some baseUrl).

My whole structure looks like this:

/dist
/src
  /assets
    /img

Anyone knows what is the best way achieve such thing?

Solution

  • You should copy assets into /dist and reference to it in index.html

    You can use copy-webpack-plugin (ad It to your package.json)

    new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    ...
]);