极客观点
项目管理
HarmonyOS
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 之后显示图片路径不对，有没有大佬指点一下 谢谢
解决
没有测试过,如果能解决再说原因~~~