无论组件嵌套路由如何，Webpack都会移动图像

Question

我在路由中使用<img src>的组件。

import myImg from './img.png'
<img src={myImg}>

Webpack s build move all files to the dist`文件夹，包括组件中的图片。

问题是它将图像移动到dist的根目录，例如dist/img.png。

但是webpack还使用组件路由重写HTML中的图像路径，例如 <img src="/path/img.png">。

它将嵌套路由中的所有图像都带到404。

我需要强制webpack相应地移动图像路由，或者在没有路由的情况下在HTML中写入src路径。

我该怎么做？

路由器

const router = (
    <BrowserRouter>
        <Route path='/'
              component={App}/>
    </BrowserRouter>
);

ReactDOM.render(
    router,
    document.getElementById('root')
);

webpack.config.js

module.exports = {
    watch  : true,
    entry  : {
        app: [
            'babel-polyfill',
            path.resolve(__dirname, 'src/index.jsx')
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output : {
        filename: 'bundle-[hash].js',
        path    : path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new ExtractTextPlugin('[name]-[hash].css'),
    ],
    module : {
        rules: [
            {
                test   : /\.jsx?$/,
                exclude: /node_modules/,
                use    : 'babel-loader',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.(less|css)$/,
                use : ExtractTextPlugin.extract(
                    {
                        use: [
                            {loader: 'css-loader'},
                            {loader: 'resolve-url-loader'},
                            {loader: 'less-loader'},
                        ]
                    }
                ),
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use : [
                    'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ],
            },
        ]
    }
}