代码之家 › 专栏 › 技术社区 › Ayan

将捆绑的css移动到其他目录会更改URL前缀../仅限于/

webpack-file-loader webpack javascript

Ayan · 技术社区 · 7 年前

我正在尝试设置我的网页配置( 这是我第一次使用webpack )多页面网站( 不是水疗 ).到目前为止一切都进展顺利,但css中元素的url路径没有指向正确的目标。

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

问题是当构建过程完成时, css中的相对URL,例如 ../assets/images/<hash>.png 改变 assets/images/<hash>.png 因此图像不会出现在页面上。但是,其他图像通过 img 标签上有 资产/图像/<散列>。巴布亚新几内亚 作为源头。

因此,我的问题是:

如何在css文件中保留相对路径?

我真的需要一些帮助,因为这是我第一次使用webpack,我花了几个不眠之夜安静地思考了这么多(

网页包。配置。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
|

1 回复 | 直到 7 年前

spirit 7 年前

试试这个,作为解决方法,替换

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