Webpack在css和html中的相对路径错误 [英] Webpack wrong relative path in css and html
问题描述
我在Google上搜索了很多，但是我没有找到解决问题的明确方法.
I have googled a lot, but I didn't find a clear solution to my question.
我的xxx.sass和index.html都将引用images文件夹中的相同xxx.png.但是webpack解析为错误的相对路径.我用
Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong relative path. I use
- webpack ^ 4.41.2，
- 用于xxx.png的文件加载器^ 4.2.0
- xxx.css的mini-css-extract-plugin ^ 0.8.0
- html-loader ^ 0.5.5 for index.html
源代码:
xxx.sass
.banner
background-image: url(../images/xxx.png)
index.html
index.html
<body>
<h1>Hello World</h1>
<img src="./images/xxx.png" />
</body>
我的文件夹结构如下:
/dist
/images
xxx.png
/css
xxx.css
index.js
index.html
/src
/css
xxx.sass
/images
xxx.png
index.js
index.html
如您所见，index.html和xxx.sass中xxx.png的相对路径应该不同.但是在运行webpack之后，index.html和xxx.css到xxx.png的相对路径相同，例如:
As you can see the relative path to xxx.png in index.html and xxx.sass should be different. But after I run webpack, the index.html and xxx.css have the same relative path to xxx.png, like:
index.html
index.html
<body>
<h1>Hello World</h1>
<img src="images/google_0877987d.png" />
<script type="text/javascript" src="index_b88aa84a.js"></script>
</body>
xxx.css
.banner
{
width:184px;
height:60px;
background-image:url(images/google_0877987d.png)
}
我的webpack.config.js:
My webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js',
},
module: {
rules: [
{
test: /\.sass$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name]_[contenthash:8].[ext]',
context: path.resolve(__dirname, 'src/'),
useRelativePaths: true,
},
}],
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
root: path.resolve(__dirname, 'src/'),
attrs: ['img:src', 'link:href'],
},
}],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin({
filename: 'css/[name]_[contenthash:8].css',
}),
],
}
推荐答案
最后，我找到了解决方案.为MiniCssExtractPlugin.loader添加 publicPath 选项可以解决该问题.
Finally, I found the solution. Add the publicPath option for the MiniCssExtractPlugin.loader solve the problem.
{
test: /\.sass$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
},
},
'css-loader',
'sass-loader',
],
}
尽管问题已解决，但我对此解决方案并不满意，因为如果更改了文件夹结构，则需要相应地更新publicPath.
Although the problem is solved, I'm not 100% satisfied with this solution as the publicPath need to be updated accordingly if the folder structor is changed.
如果有一些不错的解决方案，根据文件夹结构自动解析相对路径，那就更好了.
It will be better if there's some nice solution to resolve the relative path according to the folder structure automatically.
这篇关于Webpack在css和html中的相对路径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
