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>
browser error
index.css
-sharptupian{
background-image: url(../imagess/a.png);
width:466px;
height:453px;
}
ask for the boss"s answer