Перемещение связанного css в другой каталог изменяет префикс URL../ только на /

Question

Я пытаюсь настроить конфигурацию веб-пакета (это мой первый раз с веб-пакетом) для многостраничного веб-сайта (не SPA). Все до сих пор идет хорошо, но пути URL для элементов в css не указывают на правильное назначение.

я использую extract-text-webpack-plugin создавать отдельные пакеты CSS и file-loader загрузить изображения.

Проблема в том, что когда процесс сборки завершается, относительный URL в CSS, например, ../assets/images/<hash>.png изменения в assets/images/<hash>.png и, следовательно, изображение не отображается на странице. Но другие изображения, размещенные на html-странице с помощью тегов img, загружаются с assets/images/<hash>.png как источник

Следовательно, мой вопрос

• Как я могу сохранить относительный путь внутри файла CSS?

Я действительно мог бы использовать некоторую помощь как мой первый раз с webpack и провел тихие несколько бессонных ночей, выясняя это так.:(

Webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("css/[name].styles.min.css");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const entryPoints = require("./app");

module.exports = {
    entry: entryPoints,
    output: {
        path: path.resolve(__dirname + "/dist"),
        filename: "js/[name].bundle.min.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["es2015"]
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                minimize: true,
                                sourceMap: true
                            }
                        },
                        "postcss-loader"
                    ]
                })
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|gif|jpg|png)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "assets/images/",
                            publicPath: "assets/images/"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        extractCSS,
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/index.html",
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            filename: "page2.html",
            template: "src/page2.html",
            chunks: ["page2"]
        }),
        new CleanWebpackPlugin(["dist"])
    ]
}; 

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

Project
|
|__ dist
|     |__ assets
|     |       |__images
|     |             |__ image1-hash
|     |             |__ image2-hash
|     |             |__ image3-hash
|     |
|     |__ css
|     |    |_ index.styles.min.css
|     |    |_ page2.styles.min.css
|     |
|     |__ js
|     |    |_ index.bundle.min.js
|     |    |_ page2.bundle.min.js
|     |
|     |__ index.html
|     |__ page2.html
|
|__ node_modules
|

Answer 1

Попробуйте это, как обходной путь, замените

const extractCSS = new ExtractTextPlugin("css/[name].styles.min.css");

с

const extractCSS = new ExtractTextPlugin("[name].styles.min.css");

---

Окончательное решение:

        {
            test: /\.(svg|gif|jpg|png)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        outputPath: "assets/images/",
                        publicPath: "/assets/images/" // <- use absolute path
                    }
                }
            ]
        }