Проблема пути к фоновому изображению при упаковке webpack css

Webpack

1 Не извлекать файлы css в отдельный каталог файлов

Внутри тега стиля компонента vue есть следующий код css, который использует фоновое изображение.

    background-image: url("../assets/img/icon_add.png");

Конфигурация разбора css-загрузчика в webpack выглядит следующим образом

    {
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['style-loader', 'css-loader', 'less-loader']
    }

После упаковки в каталоге dist нет файла css. Это связано с тем, что файлы css преобразуются в файлы js.

В это время запустите проект, фоновое изображение вводится правильно и может нормально отображаться.

2 Извлеките файлы css в отдельный каталог файлов.

Используйте mini-css-extract-plugin для извлечения файлов css отдельно в каталог css в каталоге dist.

2.1 конфигурация загрузчика

    {
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }

2.2 конфигурация плагина

        new MiniCssExtractPlugin({
            filename: 'css/[name][contenthash].css',
        })

После упаковки структура каталогов dist выглядит следующим образом:

Вы можете видеть, что изображение находится в корневом каталоге (dist) в это время, но файл css находится в каталоге dist/css/. Теперь давайте посмотрим, как упакованный файл css ссылается на путь к изображению.

2.3 Результаты упаковки

  background-image: url(bb65a86a2fe7669e483a56b970bea421.png);

Вы видите, что в каталоге dist/css нет изображения bb65a86a2fe7669e483a56b970bea421.png. Поэтому изображение не может отображаться должным образом. в идеале

background-image: url(../bb65a86a2fe7669e483a56b970bea421.png);

3 решения

Измените конфигурацию загрузчика следующим образом

    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            // 当前的css所在的文件相对于打包后的根路径dist的相对路径
            publicPath: '../'
        }
    }, 'css-loader', 'less-loader'

Суммировать

Разделение файла css приводит к неправильному пути к фоновому изображению css. Суть решения заключается в настройке значения publicPath. Значение publicPath — это значение относительного пути каталога файлов, в котором находится файл css, относительно корневая директория. Например, корневой путь — /, а каталог, в котором находится файл css, — /css/, поэтому относительный путь — ..

неожиданная проблема

Почему пакет WebPack, файл CSS смешивается с файлом bundle.js, но изображение не смешивается с пакетом.js? ? ?

Категории