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

webpack中的url-loader配置正在React JS项目

2 个答案: