url-loader:可以替代file-loader,打包图片文件
img-loader:压缩图片
html-loader:使html文件中引入的图片得到处理
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: {
index: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name][hash:5].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg||png||jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name][hash:5].[ext]', //单独抽离图片名称
limit: 10, //限制图片大小 <=?kb 进行base64编码,大于则单独抽取出来
outputPath: 'images',
esModule: false //解决html中img src为"[object Module]"
}
},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-pngquant')({
quality: [0.4, 0.7] //质量范围
}),
]
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin()
],
mode: 'development'
}