webpack自动化打包方式详解

npm i webpack-dev-server -D

const path = require('path')//nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口
    entry: './src/main.js',//相对路径
    //出口
    output: {
        //__dirname nodejs变量，代表当前文件夹目录，当前文件侠士config.js 目录就是最外层的demo
        path: path.resolve(__dirname, 'dist'),//绝对路径
        //文件名
        filename: './static/index.js',
        clean: true
    },
    //加载器
    module: {
        //规则
        // loader的配置
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',//设置资源
                generator: {
                    filename: "static/[hash][ext][query]",//打包文件名
                },
                parser: {
                    dataUrlCondition: {
                        // 小于10kb会转换base64，优点减少请求数量，缺点体积变大
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,//排除node_modules不处理
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]

    },
    //插件
    plugins: [
        new ESLintPlugin({
            context: path.resolve(__dirname, "src")
        }),
        new HtmlWebpackPlugin({
            //模板，以public/index.html文件创建新的html文件
            //心得html结构跟原来一样并且自动引入打包输出的资源
            template:path.resolve(__dirname,"public/index.html")
        })],

    // 开发服务器
    devServer:{
        host:"localhost",//启动服务器域名
        port:'3000',//端口号
        open:true,//是否自动打开浏览器
    },
    //模式
    mode: "development"
}

"scripts": {
    "start":"npm run dev",
    "dev":"webpack serve --config ./config/webpack.dev.js",
    "build":"webpack --config ./config/webpack.prod.js"
  },