const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const compressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
entry: './src/index.js',
output: {
filename: './built.js',
path: resolve(__dirname, 'build')
},
// 配置loader
module: {
rules: [
// 配置less
{
test: /\.less$/,
// 从右往左解析loader
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
]
},
// 配置css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader'
]
},
// 图片
{
test: /\.(jpg|gif|png)/,
loader: 'url-loader',
// loader配置项
options: {
// 默认使用common.js 需要改为esModule
esModule: true,
// 设置阈值 超过阈值交给 file-loader进行处理 小于的话图片路径改为base64编码
limit: 5 * 1024,
// 文件名只截取前十位
name: '[hash:10].[ext]'
}
},
]
},
plugins: [
// 打包html
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩HTML
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
// 分离css
new MiniCssExtractPlugin({
filename: 'css/buit.css'
}),
// 压缩CSS
new optimizeCssAssetsWebpackPlugin(),
// 开启g-zip压缩
new compressionWebpackPlugin({
test: /\.(js|css)$/, //匹配要压缩的文件
algorithm: "gzip"
})
],
// 开启本地服务
devServer: {
contentBase: resolve(__dirname, 'build'),
// 开启g-zip压缩
compress: true,
port: 3000,
open: true
},
mode: 'development'
}
优化:
1.使用html-webpack-plugin
压缩HTML
2.使用optimize-css-assets-webpack-plugin
压缩CSS
3.使用compression-webpack-plugin
开启g-zip压缩
4.使用dll-webpack
缓存第三方库