webpack5基本配置详解

1.entry--入口起点

1.string

单入口

entry :  './src/js/index.js',

打包形成一个chunk文件，生成一个bundle文件

2.array

多入口

 entry : ['./src/js/index.js','./src/js/add.js'],

所有入口文件只会形成一个chunk,只会生成一个bundle文件

作用:开发的时候引入js文件可以进行热更新调试

3.object

多入口

有几个入口文件就会形成几个chunk,生成几个bundle文件

此时chunk的名称是key

entry : {
        index : './src/js/index.js',
        add : './src/js/add.js'
    },

4.特殊用法

多入口热更新

 entry : {
        index : ['./src/js/index.js','./src/js/minus.js'],
        add : './src/js/add.js'
    },

index.js跟minus.js生成一个chunk,add.js生成一个chunk

2.output

 output : {
        //文件名称(目录+指定名称)
        filename : "js/[name].js",
        //输出文件目录，将来所有资源输出的公共目录
        path : resolve(__dirname,"build"),
        //所有资源引入公共路径前缀
        //      imgs/a.jpg----当前相对路径下imgs/a.jpg 
        //      /imgs/a.jpg----当前服务器根目录下imgs/a.jpg
        // publicPath : '/',
        //非入口chunk（import与optimization生成的chunk）的名称,
        chunkFilename : '[name]_chunk.js',
        //打包后向外暴露整个库的变量名
        library : '[name]',
        //变量名赋值到某个对象下,一般配合dll使用，普通情况下不启用
        // libraryTarget : 'window',    //适用于browser
        // libraryTarget : 'global',    //适用于nodejs
        libraryTarget : 'commonjs'    //适用于commonjs
    },  

3.modules

module : {
        rules : [
            {
                test : /\.css$/,
                //多个loader用use
                use : ['style-loader','css-loader']
            },
            {
                test : /\.js$/,
                //不检查node_modules文件
                exclude : /node_modules/,
                //只检查src文件夹下的文件
                include : resolve(__dirname,"src"),
                //比其他js检查规则优先执行，post延后执行,不填写按顺序执行
                enforce : 'pre',    
                //单个loader用loader
                loader : 'babel-loader',
                //具体配置
                options : {}
            },
            {
                //数组内相同规则只执行一次
                oneOf : [],
            }
        ]
    }, 

4.resolve

webpack.config.js

//解析模块规则
    resolve : {
        //配置解析模块路径别名,优点简写路径，缺点路径没有提示
        alias : {
            $css : resolve(__dirname,"src/css"),

            //vue编译时会将#app看成是template
            //编译运行时均解析template
            "vue$" : "vue/dist/vue.esm.js"
        },
        //配置省略文件路径的后缀名,一般只省略js,json后缀名
        extensions : [".js",".json",".css",".vue"],
        //告诉webpack去哪个目录找解析模块
        modules : [resolve(__dirname,"../node_modules"),'node_modules']
    }

./src/index.js

import "$css/index"

5.devServer

devServer : {
        //该配置项允许配置从目录提供静态文件的选项（默认是 'public' 文件夹）
        static : {
            //运行代码目录
            directory : resolve(__dirname,"build"),
            //监听directory目录，一旦directory目录内文件变化，则reload
            watch : true
        },
        //启用gzip压缩，加快编译速度
        compress : true,
        //端口号
        port : 5000,
        //域名
        host : 'localhost',
        //自动在浏览器打开,或者packge.json中配置scripts:dev:'webpack-dev-server --open'
        open : true,
        //开启hmr功能
        hot : true,
        client : {
            //不显示启动日志
            logging : 'none',
            //当出现编译错误或警告时，在浏览器中显示全屏覆盖。
            overlay : false,
        },
        //服务器代理--解决开发环境跨域问题
        proxy : {
            //一旦devServer5000的服务器接收到/api/xxx的请求，就会把服务器转发到另外一个服务器(3000)
            '/api':{
                target : "http://localhost:3000",
                //发送请求时，请求路径重写，将/api/xxx转换成/xxx
                pathRewrite : {
                    '^/api' : ''
                }
            }
        }
    },
    watchOptions : {
        //忽略node_modules，监听更高效
        ignored : /node_modules/
    },

6.optimization

let { resolve }=require("path")
let HttpWebpackPlugin=require("html-webpack-plugin")
let TerserWebpackPlugin=require("terser-webpack-plugin")

module.exports={
    entry :  './src/js/index.js',
    output : {
        //文件名称(目录+指定名称)
        filename : "js/[name][contenthash].js",
        //输出文件目录，将来所有资源输出的公共目录
        path : resolve(__dirname,"build"),
        chunkFilename : 'js/[name]_[contenthash:10]chunk.js'
    },
    module : {

    },    
    plugins : [
        new HttpWebpackPlugin({
            template : './src/index.html'
        })
    ],
    mode : 'production',
    //解析模块规则
    optimization : {
       splitChunks : {
            chunks : "all",
            //默认值，可以不写
            minSize : 30*1024,   //分割的chunk最小为30kb
            maxSize : 0,  //最大没有限制
            minChunks : 1,    //要提取的chunk最少被引用一次
            maxAsyncRequests : 5,    //按需加载时并行加载的文件的最大数量
            maxInitialRequests : 3,   //入口js文件最大并行请求数量
            automaticNameDelimiter : "~",    //名称连接符
            cacheGroups : {      //分割chunk的组
                //node_modules文件会被打包到vendors组的chunk中---> vendors~xxx.js
                //满足上面的公共规则:如大小超过30kb，至少被引用一次
                vendors : {
                    test : /[\\/]node_modules[\\/]/,
                    priority : -10      //优先级
                },
                default : {
                    minChunks : 2,   //要提取的chunk最少被引用2次
                    priority : -20,     //优先级
                    //如果当前要打包的模块，和之前已经被提取的模块是同一个，则复用，而不是重复打包
                    reuseExistingChunk : true   //
                }
            }
        },
        //将当前模块记录的其他模块的hash值单独打包为一个文件 runtime
        //解决:修改了a文件，其他文件的hash也产生变化
        runtimeChunk : {
            name : entrypoint=>`runtime-${entrypoint.name}`
        },
        minimizer : [
            //配置生产环境压缩方案: js和css
            new TerserWebpackPlugin({
                parallel : true,    //开启多进程打包
            })

        ] 
    }
}

./src/index.js:

import(/*webpackChunkName: 'a'*/"./add.js").then(({add})=>{
    console.log(add(9,88));
})