webpack.conf.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
//入口配置
entry:{
a:'./src/index.js',
b:'./src/index2.js'
},
//出口配置
output:{
path:path.resolve(__dirname,'dist'),//path必须是绝对路径
filename:'[name].bundle.js',
publicPath: '/'
},
module: {
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'],
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: 'url-loader',
options: {
limit: 5 * 1024,// 图片大小 > limit 使用file-loader, 反之使用url-loader
outputPath: 'images/'// 指定打包后的图片位置
}
}
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
chunks:["a"],
filename:'index.html',//默认是index.html
template:"./src/index.html"
}),
// new uglify()
],
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
port:8090,
open:true,
compress: true // 服务器返回浏览器的时候是否启动gzip压缩
}
};
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="app"></div>
<h1>wejiweji</h1>
<div id="tupian"></div>
</body>
</html>
浏览器报错
index.css
#tupian{
background-image: url(../imagess/a.png);
width:466px;
height:453px;
}
求大佬解答