webpack常用基本配置

loader配置

css配置

    module: {
        rules: [
            // 详细loader配置
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },

css单独提取成文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module: {
        rules: [
            // css
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
plugins: [
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件重命名
            filename:"css/built.css"
        })
    ],

css压缩

//webpack5
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    optimization: {
        // 设置开发环境也可以压缩
        minimize:true,
        minimizer: [
            new CssMinimizerPlugin()
        ]
    },

图片配置

webpack4

    module: {
        rules: [
            // 详细loader配置
            {
                test: /\.(jpg|png|gif)$/,
                use: [url-loader],
                options:{
                	//对8kb以下爱的图片进行base4处理
                	limit:8*1024，
                    esmodule:false//f
                }
            }，
            {
            //解决HTML页面引入img
                test:/\.html$/,
                loader:"html-loader"
            }
        ]
    },

webpack5

    module: {
        rules: [
            // 详细loader配置
            {
                test: /\.(jpg|png|gif)$/,
                //默认是对8kb以下爱的图片进行base4处理
                type:"asset"，
                //修改默认值,改为4kb
                parser:{
                	dataUrlCondition:{
                		maxSize:4*1024
            		}
            	}，
            {
            //解决HTML页面引入img
                test:/\.html$/,
                loader:"html-loader"
            }
            }
        ]
    },            

iconfont配置

webpack4

    module: {
        rules: [
            // 详细loader配置
            {
                //除了.css .js .html文件之外的
                exclude: /\.(css|js|html)$/,
                loader:"file-loader"
            }
        ]
    },

webpack5

module: {
        rules: [
            // loader
            {
                exclude: /\.(css|js|html)$/,
                type: 'asset/resource',
                generator: {
                    filename:"[hash][ext][query]"
                }
            }
        ]
    },

plugin配置

html插件

const HtmlWebpackPlugin = require('html-webpack-plugin')    
module.exports={
    plugins: [
        // 默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
        // 需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制./src/index.html文件，并自动引入打包输出的所有资源
            template:'./src/index.html',
            //y
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        })
    ],
}

css-minimizer-webpack-plugin

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    optimization: {
        // 设置开发环境也可以压缩
        minimize:true,
        minimizer: [
            new CssMinimizerPlugin()
        ]
    },
}

使用css-minimizer-webpack-plugin后webpack无法自动打包js!!!

所以我们需要手动下载js压缩插件terser-webpack-plugin

npm i terser-webpack-plugin -D

//webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

重新打包，能发现js文件被压缩了