将捆绑的 css 移动到不同的目录将 URL 前缀 ../ 更改为仅 /

Question

我正在尝试为多页网站（而非 SPA 设置我的 webpack 配置（这是我第一次使用 webpack） )。到目前为止一切顺利，但 css 中元素的 url 路径未指向正确的目的地。

我正在使用 extract-text-webpack-plugin 创建单独的 css 包并使用 file-loader 加载图像。

问题是当构建过程完成时，css 中的相对 URL 例如 ../assets/images/<hash>.png 更改为 assets/images/<hash>.png 因此图像不会显示在页面上。但是，通过 img 标签放置在 html 页面中的其他图像以 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
                    }
                }
            ]
        }

将捆绑的 css 移动到不同的目录将 URL 前缀 ../ 更改为仅 /

Moving bundled css to a different directory changes URL prefix ../ to only /

javascript

webpack

webpack-file-loader

因此，我的问题是