Webpack笔记（五）

六. webpack配置详解

6.1 entry

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/*
	entry:入口起点
		1.string --> './src/index.js'
			打包生成一个chunk。输出一个bundle文件
		2.array --> ['./src/index.js','./src/add.js']
			多入口
			所有入口文件最终只会形成一个chunk，输出数去只有一个bundle文件
				--> 只有在HMR功能中让html热更新生效~
		3.object
			多入口
			有几个入口文件就形成几个chunk，输出几个bundle文件
			此时chunk的名称是key
			
			--> 特殊用法
				{
					//所有入口文件最终只会生成一个chunk，输出出去也只有一个bundle文件
                    index:['./src/index.js','./src/count.js'],
                    //形成一个chunk，输出一个bundle文件 
                    add:'./src/add.js'
				}
*/

module.exports = {
	//entry:'./src/index.js',
    //entry:['./src/index.js','./src/add.js']
    entry:{
		index:['./src/index.js','./src/count.js'],
    	add:'./src/add.js'
	}
    output:{
		filename:'built.js',
        path:resolve(__dirname,'built')
    },
    plugins:[new HtmlWebpackPlugin()],
    mode:'development'
}

6.2 output

module.exports = {
	entry:'./src/index.js',
    output:{
    	//文件名称（指定名称+目录）
		filename:'built.js',
    	//输出文件目录（将来所有资源输出的公共目录）
        path:resolve(__dirname,'built'),
        //所有资源引入公共路径前缀 ——> 'imgs/a.jpg' -->'/imgs/a.jpg'
        publicPath:'/',
        chunkFilename:'js[name]_chunk.js',//非入口chunk的名称
        library:'[name]',//整个库向外暴露的变量名
        //libraryTarget:'window' //变量名添加到哪个上 browser
    	libraryTarget:'global' //变量名添加到哪个上   node
    },
    plugins:[new HtmlWebpackPlugin()],
    mode:'development'
}

6.3 module

module.exports = {
	entry:'./src/index.js',
    output:{
		filename:'built.js',
        path:resolve(__dirname,'built'),
    },
    module:{
		rules:[
            //loader配置
            {
            	test:'/\.css$/',
                //多个loader用use
                use:['style-loader','css-loader']
            },
            {
                test:'/\.js$/',
                //单个loader用loader
                loader:'eslint-loader',
                //排除node_modules下的js文件
                exclude:/node_module/,
                //只检查src下的js文件
                include:resolve(__dirname,'src'),
                //优先执行
                enforce:'pre',
                //延后执行
                //enforce:'post',
                options:{}
            },
            {
                //以下配置只会生效一个
                oneOf:[]
            }
        ]
    }
    plugins:[new HtmlWebpackPlugin()],
    mode:'development'
}

6.4 resolve

module.exports = {
	entry:'./src/index.js',
    output:{
		filename:'built.js',
        path:resolve(__dirname,'built'),
    },
    module:{
		rules:[
            {
            	test:'/\.css$/',
                use:['style-loader','css-loader']
            },
        ]
    }
    plugins:[new HtmlWebpackPlugin()],
    mode:'development',
    //解析模块的规则
    resolve:{
        //配置解析模块路径别名：优点简写路径 缺点没有
		alias:{
			$css:resolve(__dirname,'src/css'),
        },
        //配置省略文件路径的后缀名
        extensions:['.js','.json','jsx','.css'],
        //告诉webpack解析模块是去找哪个目录
        modules:[resolve(__dirname,'../../node_modules'),'node_modules']
    }
}

6.5 devServer

module.exports = {
	entry:'./src/index.js',
    output:{
		filename:'built.js',
        path:resolve(__dirname,'built'),
    },
    module:{
		rules:[
            {
            	test:'/\.css$/',
                use:['style-loader','css-loader']
            },
        ]
    }
    plugins:[new HtmlWebpackPlugin()],
    mode:'development',
    resolve:{...},
    devServer:{
		//运行代码的目录
        contentBase:resolve(__dirname,'build'),
        //监视contentBase 目录下的所有文件，一旦文件变化就会relaod
        watchContentBase:true,
        //忽略文件
        watchOptions:{
			ignored:/node_modules/
        }
        //启动gzip压缩
        compress:true,
        //端口号
        port:5000,
        //域名
        host:'localhost'，
        //自动打开浏览器
        open:true,
        //开启HMR功能
        hot:true,
        //不要显示启动服务器日志信息
        clientLogLevel:'none',
        //除了一些基本启动信息意外，其他内容都不要显示    
        quiet:true
        //如果出错了，不要全屏提示~
        overlay:false,
        //服务器代理 --> 解决开发环境跨域问题
        proxy:{
            //一旦devServer(5000)服务器接收到/api/xxx的请求，就会把请求转发到另外一个服务器（3000）
			'/api':{
				target:'http://localhost:3000',
                //发送请求时，请求路径重写：将/api/xxx --> /xxx（去掉api）
                pathRewrite:{
					'^/api':''
                }
            }
        }
    }
}

 

6.6 optimization

module.exports = {
	entry:'./src/index.js',
    output:{
		filename:'built.js',
        path:resolve(__dirname,'built'),
    },
    module:{
		rules:[
            {
            	test:'/\.css$/',
                use:['style-loader','css-loader']
            },
        ]
    }
    plugins:[new HtmlWebpackPlugin()],
    mode:'development',
    //解析模块的规则
    resolve:{...,
    devServer:{...,
    optimization:{
		splitChunks:{
			chunk:'all',
            /*以下默认值，可以不写
            minSize:30 * 1024, //分割的chunk最小为30kb
            maxSize:0,//没有最大限制
            minChunks:1, // 要提取的chunk最少被引用一次
            maxAsyncReqeusts:5, //按需加载时并行加载的文件的最大数量
            maxInitialRequests:3, //入口js文件最大并行请求数量
            automaticNameDelimiter: '~', //名称连接符
            name:true, //可以使用命名规则
            cacheGroups：{
            	//分割chunk的组
                //node_modules文件会被打包到vendors组的chunk中。 --> vendors~xxx.js
                //满足上面的公共规则，如：大小超过30kb，至少被引用一次
                vendors:{
					test:/[\\/]node_modules[\\/]/,
                    //优先级
                    priority:-10,
                }，
                default:{
					//要提取的chunk最少被引用2次
                    minChunks:2,
                    //优先级
                    priority:-20,
                    //如果当前要打包的模块，和之前已经被提取的模块是同一个，就会服用，而不是重新打包模块
                    reuseExistingChunkL:true
                }
            }*/
        },
    
        // 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
        // 解决：修改 a 文件导致 b 文件的 contenthash 变化
        runtimeChunk: {
        	name: entrypoint => `runtime-${entrypoint.name}`
        },
        minimizer: [
        	// 配置生产环境的压缩方案：js 和 css
        	new TerserWebpackPlugin({
                // 开启缓存
                cache: true,
                // 开启多进程打包
                parallel: true,
                // 启动 source-map
                sourceMap: true
        	})
        ]
    }
}