官方例子
还有相应的 imagemin-gifsicle imagemin-pngquant imagemin-svgo
$_> npm i -D img-loader imagemin-mozjpeg imagemin html-webpack-plugin mini-css-extract-plugin html-loader url-loader css-loader
// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
index: './app.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
]
},
{
test: /\.(png|jpg|jpef|gif|)$/,
use: [{
loader:'url-loader',
options: {
limit: 20480, // 字节数,小于转base64
useRelativePath: true
},
},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-mozjpeg')({
progressive: true,
arithmetic: false
}),
]
}
}
]
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: 'css',
template: './index.html',
chunks: ['index']
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
mode: 'development'
};