webpack3 url-loader和image-webpack-loader不生效？

Question

打包后，url-loader不会在指定的目录下生产新的img，image-webpack-loader也没压缩。在组件里引用图片路径错误（应该也是url-loader没起作用的缘故）

项目结构如下：

圈出来的是引用的组件

组件里用的是相对地址，引的是src/images里的图片

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/root.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: __dirname + '/node_modules/',
                include: __dirname + '/src/js',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: [
                        'react-html-attrs',
                        ["import", {
                            libraryName: "antd",
                            style: "css"
                        }]
                    ]
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader?importLoaders=1',
                    'postcss-loader'
                ]
            },            
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                loaders: [
                    'url-loader?limit=4000&name=images/[name]-[hash:5].[ext]',
                    'image-webpack-loader'
                ]
            }            
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html',
            inject: 'body',
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }            
        })
    ]
};

这是我的webpack.config.js配置

打包后，也没有报错。但是生成的页面中的图片路径就是错的

我希望就是src/js/components/pc_header.js文件里的图片引用，能通过url和image2个loader，打包后在dist/images里生成新的图片，并且生成的新页面能引用正确的图片路径

Answer 1

搞明白了。。是jsx语法的事，图片引用不能像html一样写，要通过require引用

<img src={require('../../images/timg.jpeg')} alt=""/>