webpack5基础配置

        webpack作为现代前端开发中最火的模块打包工具，广泛应用于前端工程领域，是前端工程师必备的技能之一。

        以下是我个人针对开发环境和生产环境写的一些webpack基础配置，希望能帮助一些同学：

（开发环境）webpack.dev.js：

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口
    entry: "./src/main.js", //相对路径
    // 输出
    output: {
        // 文件输出路径
        // __dirname node.js的变量，代表当前文件的文件夹目录
        path: undefined,
        // 文件名
        filename: "static/js/main.js",
        // 在打包前把path目录清空，然后在重新打包
        // clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/, //只检测.css文件
                use: [
                    "style-loader",//将js中的css通过创建style标签添加html文件中生效
                    "css-loader" //将css资源编译成common.js的模块到js中
                ] // 执行顺序，从右到左从上到下
            },
            {
                test: /\.less$/, //只检测.less文件
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ] // 执行顺序，从右到左从上到下
            },
            {
                test: /\.s[ac]ss$/, //只检测.sass、scss文件
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ] // 执行顺序，从右到左从上到下
            },
            {
                test: /\.styl$/, //只检测.styl文件
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader"
                ] // 执行顺序，从右到左从上到下
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的转换我base64
                        maxSize: 10 * 1024
                    }
                },
                generator: {//图片打包目录
                    // hash：x 只取几位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test: /\.(ttf|woff2?|map3|map4|avi)$/,
                type: 'asset/resource',
                generator: {//字体打包目录
                    // hash：x 只取几位
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, //排除node_modules中的js文件
                use: {
                loader: 'babel-loader',}
            }
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({
            context:path.resolve(__dirname,"../src")
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        })
    ],
    // 开发配置
    devServer: {
        host: "localhost",
        port: "3000",
        open:true,
    },
    // 模式
    mode: 'development'
}

（生产环境）webpack.prod.js：

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
function getStyleLoader(pre) {
    return  [
        MiniCssExtractPlugin.loader,//将js中的css通过创建style标签添加html文件中生效
        "css-loader", //将css资源编译成common.js的模块到js中
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env",
                    ]
                }
            }
        },
        pre,
    ].filter(Boolean) // 执行顺序，从右到左从上到下
}
module.exports = {
    // 入口
    entry: "./src/main.js", //相对路径
    // 输出
    output: {
        // 文件输出路径
        // __dirname node.js的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "../dist"), // 绝对路径
        // 文件名
        filename: "static/js/main.js",
        // 在打包前把path目录清空，然后在重新打包
        clean: true
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/, //只检测.css文件
                use: getStyleLoader()
            },
            {
                test: /\.less$/, //只检测.less文件
                use: getStyleLoader("less-loader")
            },
            {
                test: /\.s[ac]ss$/, //只检测.sass、scss文件
                use: getStyleLoader("sass-loader")
            },
            {
                test: /\.styl$/, //只检测.styl文件
                use: getStyleLoader("stylus-loader")
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        //小于10kb的转换我base64
                        maxSize: 10 * 1024
                    }
                },
                generator: {//图片打包目录
                    // hash：x 只取几位
                    filename:"static/images/[hash:10][ext][query]"
                }
            },
            {
                test: /\.(ttf|woff2?|map3|map4|avi)$/,
                type: 'asset/resource',
                generator: {//字体打包目录
                    // hash：x 只取几位
                    filename:"static/media/[hash:10][ext][query]"
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/, //排除node_modules中的js文件
                use: {
                loader: 'babel-loader',}
            }
        ]
    },
    // 插件
    plugins: [
        new ESLintPlugin({
            context:path.resolve(__dirname,"../src")
        }),
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        }),
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        }),
        new CssMinimizerPlugin()
    ],
    // 模式
    mode: 'production'
}