webpack基本配置和优化

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缓存第三方库