Webpack dev and prod environment

production environment requires packaged folders to be in the following format:

  - abc
    - public
        -  img
        -  font
    - static   
  - index.html

and 1 folder have a folder and an index.html, public is a static resource file.
so the path to resources such as pictures in a production environment is similar to / abc/public/img/name.png

the production environment is done, but now I have encountered problems in the development environment (projects based on create-react-app)
I want the path of picture resources in the development environment to be the same as that in the production environment. In the
development environment, the contentBase of devServer is set to the public folder, and I change the contentBase to the abc folder, and the resources in copy public to this abc folder. Webpack.config.dev.js sets a series of operations, such as publicPath ="/ abc",

but the path problem can not be solved all the time. If you have some trouble, you have to provide some ideas. Thank you