webpack5基本配置详解

「爱情、让人受尽委屈。」 2022-09-12 09:53 187阅读 0赞

# 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));
    })

#  #