webpack配置路径的问题
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="small"></div>
<div class="big"></div>
</body>
</html>index.js
import './style/style.css';style.css
.small {
width: 200px;
height: 200px;
background: url(../img/1.png) no-repeat;
}
.big {
width: 500px;
height: 350px;
background: url(../img/2.jpg) no-repeat;
}webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry:{
index:'./src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
open:true,
publicPath:'/'
},
module: {
rules:[
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
limit: 3,
name: '[name].[hash:8].[ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: '[id].[hash].css'
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.html'),
}),
]
};npx webpack-dev-server 之后显示图片路径不对，有没有大佬指点一下 谢谢
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你这 limit设置的太小了，url-loader没办法把图片转为base64格式的。你要么不设置limit，要么安装file-loader，让file-loader帮你解决路径问题。
打包完之后你样式中的url路径，是相对于入口HTML页面的，不是相对于css文件的。使用file-loader解析项目中的url
解决
没有测试过,如果能解决再说原因~~~