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

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
                    }
                }
            ]
        }