1.首先我们需要下载一些插件资源。
npm i html-webpack-plugin style-loader css-loader less-loader html-loader file-loader -D2.我们准备几张图片，放在一个文件夹中，引用到index.html文件中。
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../img/1.jpg" alt="">
<div class="p1">123</div>
</body>
</html>4.index.js
import './index.less'
function add(x,y) {
return x+y;
}
console.log(add(1,4));5.index.less
.p1{
width: 100px;
height: 100px;
background: url('../img/3.jpeg') 100% 100%;
}6.webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.less$/,
//多个loader放在use数组中
use:['style-loader','css-loader','less-loader']
},
{
test:/\.(jpg|png|jpeg)$/,
loader:'url-loader',
options:{
// 16kb一下
limit:8*1024,
esModule:false,
name:'[hash:9].[ext]'
},
type:'javascript/auto'
},
{
test:/\.html$/,
loader:'html-loader'
}
]
},
plugins: [
//自动打包所有资源,生成的bundle.js文件自动引入到dist文件夹中的index.html
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'//开发者模式
}7.输入webpack指令，生成dist文件夹。如图：
