@Vamba45

Почему меняется url у картинки после сборки Вебпака?

background: url(../img/intro__bg.jpg) в main.scss пишу такой путь до картинки, на выходе получаю: background:url(assets/img/intro__bg.jpg.

пробовал обрабатывать scss с помощью resolve-url-loader, но не помогло

...
module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [{
                    loader: MiniCSSExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                    options: {
                      url: true,
                      sourceMap: true,
                    }
                  },'postcss-loader',
                  {
                    loader: 'resolve-url-loader',
                    options: {
                      root: paths.src
                    }
                  }, 
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true,
                    }
                  }]
            },

...


Код вебпака:

common
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

const fs = require('fs')
const paths = require('./paths')
const path = require('path')

const pages_dir = `${paths.src}/pages`
const pages_dirs = fs.readdirSync(pages_dir).filter(filename => filename.endsWith(''))

const component_dir = `${paths.src}/components`
const component_dirs = fs.readdirSync(component_dir).filter(filename => filename.endsWith(''))

module.exports = {
    entry: {
        index: paths.src + '\\index.js'
    },
    output: {
        filename: `${paths.assets}js/[name].js`,
        path: paths.dist,
        assetModuleFilename: 'assets/img/[name][ext]'
    },
    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 1,
            minChunks: 2
        }
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [{
                    loader: MiniCSSExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                    options: {
                      url: true,
                      sourceMap: true,
                    }
                  },'postcss-loader',
                  {
                    loader: 'resolve-url-loader',
                    options: {
                      root: paths.src
                    }
                  }, 
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true,
                    }
                  }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/resource',
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader'
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        ...pages_dirs.map(dir => new HtmlWebpackPlugin({
            template: `${pages_dir}/${dir}/${dir}.html`,
            filename: `${dir}.html`,
            chunks: [`${dir}`],
            inject: 'body'
        })),
        new MiniCSSExtractPlugin({
            filename: `${paths.assets}css/[name].css`
        }),
    ],
}


dev
const webpack = require('webpack')
const { merge } = require('webpack-merge')

const common = require('./webpack.common')
const paths = require('./paths')

module.exports = merge(common, {
    mode: 'development',
    target: 'web',
    devtool: 'source-map',
    devServer: {
        contentBase: paths.dist,
        open: true,
        hot: true,
        port: 8080,
        writeToDisk: true,
        serveIndex: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
})


prod
const { merge } = require('webpack-merge')

const paths = require('./paths')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    mode: 'production',
})


структура проекта:
60d3afc8be810560220161.png
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
@Vamba45 Автор вопроса
Помогло вот это:

output: {
 publicPath: '../../'
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
pumbasl
@pumbasl
Вы сами ответили на свой вопрос, "После сборки Вебпаком".
Мне кажется этот скриншот на главной странице вебпака объяснит Вам в чем дело>
60d40607dfea3316897285.png
Ответ написан
@YahorDanchanka
Frontend developer
Поле assetModuleFilename указывает, куда попадут файлы после сборки. Удалите свойство, либо переопределите значение. Все изображения после сборки окажутся по пути outputPath/assetModuleFilename
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы