webpack 中的 url-loader 配置正在从 React JS 项目中的不同路径加载图像

Question

我正在开发 React JS 项目。 我正在为项目使用现成的 bootstrap 3 主题。

我将主题部分分解为组件。

1) 这是我的 WorkWithUs.js 组件。

import React from 'react';

import submitRest from './../images/submit_restaurant.jpg';
import delivery from './../images/delivery.jpg';

export default () => {
    return (
        <div className="container margin_60">
            <div className="main_title margin_mobile">
                <h2 className="nomargin_top">Work with Us</h2>
                <p>
                    Cum doctus civibus efficiantur in imperdiet deterruisset.
                </p>
            </div>
            <div className="row">
                <div className="col-md-4 col-md-offset-2">
                    <a className="box_work" href="">
                        <img src={submitRest} width="848" height="480" alt="" className="img-responsive" />
                        <h3>Submit your Restaurant<span>Start to earn customers</span></h3>
                        <p>Lorem ipsum dolor sit amet, ut virtute fabellas vix, no pri falli eloquentiam adversarium. Ea legere labore eam. Et eum sumo ocurreret, eos ei saepe oratio omittantur, legere eligendi partiendo pro te.</p>
                        <div className="btn_1">Read more</div>
                    </a>
                </div>
                <div className="col-md-4">
                    <a className="box_work" href="submit_driver.html">
                        <img src={delivery} width="848" height="480" alt="" className="img-responsive" />
                        <h3>We are looking for a Driver<span>Start to earn money</span></h3>
                        <p>Lorem ipsum dolor sit amet, ut virtute fabellas vix, no pri falli eloquentiam adversarium. Ea legere labore eam. Et eum sumo ocurreret, eos ei saepe oratio omittantur, legere eligendi partiendo pro te.</p>
                        <div className="btn_1">Read more</div>
                    </a>
                </div>
            </div>
        </div>
    );
}

如上图，我正在导入两张图片。

2) 项目结构

3) 这是我的 webpack.config.js 文件

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = (env) => {
    const isProduction = env === 'production';
    const CSSExtract = new ExtractTextPlugin('styles.css');

    return {
        entry: ['babel-polyfill','./src/app.js'],
        output: {
            path : path.join(__dirname, 'public', 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    loader: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: CSSExtract.extract({
                        fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true
                                }
                            }
                        ]
                    })
                },
                {
                    test: /\.(png|jp(e*)g|gif|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8000,
                                name: 'images/[hash]-[name].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf|mp4)$/,
                    loader: "file-loader"
                }
            ]
        },
        plugins: [
            CSSExtract,
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                "window.jQuery": "jquery"
            })
        ],
        devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true,
            publicPath: '/dist/'
        }
    }
}

由于我使用 url-loader 处理图片，如果图片大小大于 8kb，图片将被转换并保存到路径 'pubilc/dist/images/filename.jpg'

当我运行我的开发服务器时，我看到图像大小超过 8kb，它被处理并存储在位置 'public/dist/images/filename.jpg'

但是当我在浏览器中查看它时，我发现没有显示任何图像。 当我检查代码时，我看到它使用的图像路径是'image/filename.jpg'，它应该是路径'public/dist/images/filename'。

查看下面的截图。

但是，如果我将图像路径更改为“/dist/images/filename.jpg”，我会看到图像加载得非常好。

查看下面的截图。

我看到url-loader正在正确处理图像并将其存储到路径'public/dist/images/filename'。但是运行服务器后，它所采用的图像路径不同。

请帮助我如何调整 webpack 设置以使其正常工作。

Answer 1

您应该指定一个输出路径，而不是将其添加到name 属性中。 改变这个： `

    {
                        test: /\.(png|jp(e*)g|gif|svg)$/,
                        use: [
                            {
                                loader: 'url-loader',
                                options: {
                                    limit: 8000,
                                    name: 'images/[hash]-[name].[ext]'
                                }
                            }
                        ]
                    },

`

到这里：

`
                {
                    test: /\.(png|jp(e*)g|gif|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8000,
                                name: '[hash]-[name].[ext]',
                                publicPath: 'images/'
                            }
                        }
                    ]
                },
`

希望对你有帮助

Answer 2

在 webpack.config.js 文件中，我进行了此更改，现在图像从正确的目录提供。

我添加了 publicPath 并将其设置为 /dist/。

            {
                test: /\.(png|jp(e*)g|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8000,
                            name: 'images/[hash]-[name].[ext]',
                            publicPath: '/dist/'
                        }
                    }
                ]
            },