webpack 常用配置文件参数

//import { resolve } from 'path';
const { resolve } = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    mode: 'development',        // 打包模式
    //entry: './src/index.js',    // 入口文件, 单入口：字符串； 多入口: 数组 ["./src/index.js", "b.js"] 这种汇总到1个 bundle;多入口：object {one: 'a.js', two: 'b.js} 多个bundle
    // 多页面示例
    entry: {
        vender: ['./src/js/j.js', './src/js/g.js'],
        index: './src/js/.in.js',
        cart: './src/js/c.js'
    },
    output: {                   // 输出文件
        //filename: 'bulid.js',
        filename: '[name].js',
        path: resolve(__dirname, 'bulid')
    },
    //loader: 配置翻译
    module: {
        rules: [
            // 引入 css, 还需要在 主js 中require css ---style-loader 将样式写入 style标签中。miniCssExtractPlugin.loader 生成引入文件
            {
                test: /\.css$/,
                // css 兼容 loader 1， 根目录下新建 postcss.config.js 引入 postcss-preset-env 2，在package.json 中配置 browserslist 
                use: [miniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader']
            },
            {
                // less
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                // sass
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                // png jpg gif
                test: /\.(png|jpg|git)$/,
                //use: ['url-loader', { loader: 'file-loader', options: {} }]
                loader: 'url-loader',
                options: {
                    // 公共目录
                    publicPath: './images',
                    // 输出目录
                    outputPath: 'images/',
                    // 限制大小 转base64
                    limit: 1024 * 8,
                    // 名称
                    name: '[hash:10].[ext]'
                }
            },
            // html 图片
            {
                test: /\.html$/,
                loader: 'html-loader',

            },
            // 原样输出 字体或者图标打包
            {
                exclude: /\.(js|json|html|css|less|png|gif|jpg|jpeg)$/,
                loader: 'file-loader',
                options: {
                    output: 'font/',
                    publicPath: './font',
                    name: '[name][hash:8].[ext]'
                }
            },
            // 检查 js 语法
            {
                test: /\.js$/,
                // 自己写的代码
                exclude: /node_moudles/,
                loader: 'eslint-loader',
                // 还需在package.json 中配置 eslintConfig ：{"extends":"airbnb-base"}
                // 修复
                options: {
                    fix: true
                }

            }
        ]
    },
    optimization: {
        minimizer: [
            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
            // `...`,
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html",
            filename: "demo.html",
            // 需要加载的js
            chunks: [
                'index.js',
                'vender.js'
            ],
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        new htmlWebpackPlugin({
            template: "./src/cart.html",
            filename: "demo2.html",
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        // css 生成引入文件
        new miniCssExtractPlugin(),
    ] // 补充loader

}