Javascript css加载程序URL根目录未修改URL

我的

webpack.config

如下：

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: { loader: 'css-loader', options: { url: false, root: 'http://localhost:9000/' } }
            }),
            exclude: /node_modules/
        }
    ]
},

阅读报告，上面写着：

但是，如果设置了根查询参数，则会将其前置到URL，然后进行翻译

如果我的css看起来是这样的：

select-page {
    background-image: url('assets/background.png') !important;
}

我希望输出的

url

是

'http://localhost/9000/assets/background.png“

---

但是，这不是我得到的，当我运行构建时没有任何更改。

尝试更改webpack配置文件。并检查资产文件夹是否应显示在src文件夹下

select-page {
    background-image: url('assets/background.png') !important;
}

module: {
    rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
           {
             test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
             use: [
                 {
                    loader: 'file-loader?name=assets/[name].[ext]',
                 }
             ]
           }
        ]
},

---

因此，为了让它正常工作，我需要确保我设置了

{url:true}

，或者忽略该键，因为它默认为true

但是，由于我通过

文件加载程序

将资产拉入，我在css中设置了资产移动后的相对url：

.select-page {
    background-image: url('/assets/background.png') !important;
}

这带来了一个新的问题，

{url:true}

这意味着

css loader

将尝试解决它-但它无法解决，因为那里不存在文件

因此，我还必须像So一样使用

{alias:{}}

：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: { 
            loader: 'css-loader', 
            options: { 
                root: 'http://localhost:8080/',
                alias: {
                    './assets': path.resolve(__dirname, './resources/images')
                }
            } 
        }
    }),
    exclude: /node_modules/
}

这意味着当

css加载器

尝试解析

url

时，它将

/assets

替换为

path.resolve（uu dirname，'./resources/images'）

，这实际上是资源所在的位置。但它不会影响原始的

url

别名

中的键前面有一个

/

是有原因的，因为它不能只处理

/

，我认为这是因为

css加载器

在继续处理

url

之前总是先用

预处理

//code>

然后，
{root:'}
在它前面加上前缀，这样我就可以得到所需的输出：

.select-page {
    background-image:url("http://localhost:8080/assets/background.png")
}

这对我来说似乎并不理想——也许只是因为我的工作流程略有不同