javascript - 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/'
                            }
                        }
                    ]
                },
`

希望对你有帮助