Неверный путь к выходному изображению после компиляции wepack - PullRequest
Новая
       23

Неверный путь к выходному изображению после компиляции wepack

0 голосов
/ 31 августа 2018

Я использовал веб-пакет для своего проекта. После компиляции фоновых изображений веб-пакета, хранящихся в папке dist / img, но в файле css, он показывает dist / img / filename..so загрузка изображения не корректна ... если путь к изображению ../ IMG / файл это будет работать .. как я могу это сделать ..

это мой файл webpack.config.js 

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: 'dist/js/app.js',
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'dist/css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                    {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: [
                        {
                            loader: "file-loader?name=[name].[ext]&outputPath=dist/img/"
                        }
                    ]
                }
            ]

        }
    }
};

1 Ответ

0 голосов
/ 31 августа 2018

Вы допустили ошибку в своем выводе и конфигурации загрузчика, сделайте это так:

var path = require ('path'); 

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: "file-loader?name=img/[name].[ext]"
                }
            ]

        }
    }
};

В любом случае вы также можете использовать CopyWebpackPlugin для копирования своих активов в dist. Я надеюсь, что это будет полезно

...