webpack配置

开发环境打包命令，但是会有很多多余注释

npx webpack ./src/index.js --mode=development

生产环境打包命令，打包后只剩下最简洁的代码

npx webpack ./src/index.js --mode=production

新建一个webpack.config.js文件在里面写配置，npx webpack就能使用

  1. entry 入口

  2. output 输出

    output:{
	//自动清空上次打包内容
	clean:true
}

  3. loader 加载器

  4. plugins 插件

  5. optimization

    optimization :{
	//压缩
	minimizer:[
		new CssMinimizerPlugin(),
		new TerserWebpackPlugin({
			parallel: threads //多进程
		})
	]
}

  6. devServer 开发服务器配置

  7. mode 模式 development开发模式 production生产模式

处理css

安装css-loader

npm install --save-dev css-loader

// 加载器
	module:{
		rules:[
			//loader的配置
			{
				test:/\.css$/,
				use:["style-loader","css-loader"]
			}
		]
	},

处理less或者sass

安装less-loader

npm install --save-dev less-loader

npm install --save-dev sass-loader

	module:{
		rules:[
			//loader的配置
			{
				test:/\.less$/,
				use:["style-loader","css-loader","less-loader","sass-loader"]
			}
		]
	},

处理图片和字体图标资源–图片会转换成base64

	module:{
		rules:[
			{
				test:/\.(png|jpe?g|gif|webp|svg)$/,
				type:"asset",
				parser:{
					//转换的文件小于10kb转base64
					dataUrlCondition:{
						maxSize:10 * 1024,
					}
				},
				generator:{
					//图片名称和路径
					filename:"static/images/[hash][ext][query]"
				}
			},
			{
				test:/\.(ttf|woff2?)$/,
				type:"asset/resource",
				generator:{
					filename:"static/images/[hash][ext][query]"
				}
			}
		]
	},

eslint配置创建一个.eslintrc.js配置文件

安装eslint-webpack-plugin插件和eslint

const ESLintPlugin = require("eslint-webpack-plugin")

plugins:[new ESLintPlugin({
	//传入选项，其他选项看官网
	//context检测那些文件
	context:path.resolve(__dirname,"src")
})]

babel处理

安装babel-loader @babel/core @babel/preset-env

	module:{
		rules:[
			{
				test:/\.js$/,
				exclude:/node_modules/,//排除node_modules中的js文件
				loader:"babel-loader",
				option:{
					// 智能预设，能够编译ES6语法
					presets:["@babel/preset-env"]
				}
			}
		]
	},

处理html资源

安装html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin")

plugins:[new HtmlWebpackPlugin({
	//模板，以public/index.html文件创建新的html文件
	//新的html文件结构和原来一致，自动引入打包资源
	template: path.resolve(__dirname,'public/')
})]

服务器启动配置

devServe:{
	host:"localhost",//启动服务器的域名
	port:"3000",//启动服务器的端口号
	open:true,//是否打开浏览器
	hot:true//开启HMR功能--只用于开发环境，只刷新更新的，false时全部刷新
}

将css文件单独提取和css压缩

使用mini-css-extract-plugin单独提取插件

css-minimizer-webpack-plugin压缩插件

html和js生产模式默认压缩

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
	plugins:[
		new MiniCssExtractPlugin({
			filename:"static/css/main.css"
		}),
		new CssMinimizerPlugin()
	]
	module:{
		rules:[{
			test:/\.css$/i,
			use:[MiniCssExtractPlugin.loader,"css-loader"]
		}]
	}
}

css兼容性处理

npm i postcss-loader postcss postcss-preset-env

module:{
		rules:[{
			test:/\.css$/i,
			use:[
				MiniCssExtractPlugin.loader,
				"css-loader",
				{
					loader:"postcss-loader",
					options:{
						postcssOptions:{
							plugins:["postcss-preset-env"]
						}
					}
				}
				]
		}]
}

SourceMap

devtool:"cheap-module-source-map" //开发模式 能提示哪一行报错
devtool:"source-map" //生产模式 代码压缩后能提示哪一列报错

oneOf 只解析一个loader配置就退出

include 包含要处理的文件

exclude 排除不要处理的文件 include和exclude只能同时使用一种

module:{
		rules:[
		{
			oneOf:[
                {
                test:/\.css$/i,
                //exclude:/node_modules/,
                include:path.resolve(__dirname,'../src'),
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                ]
                },
                {
				test:/\.(ttf|woff2?)$/,
				type:"asset/resource",
				generator:{
					filename:"static/images/[hash][ext][query]"
				}
			}
            ]
		}]
}

babel缓存和文件压缩

{
	test:/\.js$/,
	exclude:/node_modules/,//排除node_modules中的js文件
	loader:"babel-loader",
	option:{
		// 智能预设，能够编译ES6语法
		//presets:["@babel/preset-env"]
		cacheDirectory: true,//开启babel缓存
		cacheCompression: false,//关闭缓存文件压缩
	}
}
//缓存路径
plugins:[new ESLintPlugin({
	cacheLocation: path.resolve(__dirname,'../node_modules/.cache/eslintcahe')
})]

多线程打包

使用thread-loader也可直接使用terser-webpack-plugin插件

const os = require("os")
//cpu核数
const threads = os.cpus.length;

rules:[{
			test:/\.js$/i,
			use:[{
				loader:"thread-loader",//开启多进程对babel进行多进程处理
				opthions:{
				works:threads
				}
			},{
				loader:"babel-loader",
				option:{
					cacheDirectory: true,//开启babel缓存
					cacheCompression: false,//关闭缓存文件压缩
				}
			}]
		}]
		
plugins:[
	new TerserWebpackPlugin({
		parallel: threads
	})
]

减少代码体积–禁用babel对每个文件的runtime注入

@babel/plugin-transform-runtime插件

本地图片压缩

image-minimizer-webpack-plugin

无损压缩

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optiong imagemin-svgo

有损压缩

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo

new ImageMinimizerPlugin({
	minimizer:{
		implementation: ImageMinimizerPlugin.imageminGenerate,
		options:{
			plugins:[
				["gifsicle",{interlaced:true}],
				["jpegtran",{progressive:true}],
				["optipng",{optimizationLevel:5}],
				["svgo",{
					plugins:[
						"preset-default",
						"prefixIds",
						{
							name:"sortAttrs",
							params:{
								xmlnsOrder:"alphabetical"
							}
						}
					]
				}]
			]
		}
	}
})

多入口

多入口按需引入需要在代码上import引入处理

entry:{
	app:"./src/app.js",
	main:"./src/main.js"
},
output:{
	path:path.resolve(__dirname,"dist"),
	filename:"[name].js"//webpack命名方式，[name]以文件名自己名
}
optimization:{
	splitChunks:{
		chunks:"all",//对所有模块都进行分割 下面的都是默认配置
		minSize:20000,//分割代码最小的大小
		minRemainingSize:0,//类似于minSize，最后确保提取的文件大小不为0
		maxAsyncRequests:30,//按需加载时并行加载的文件的最大数量
		maxInitialRequests:30,//入口js文件最大的并行请求数量
		enforceSizeThreshold:50000,//超过50kb一定会单独打包
		cacheGroups:{
			defaultVendors:{
				test:/[\\/]node_modules[\\/]/,//需要打包到一起的模块
				priority:-10,//权重
				reuseExistingChunk:true,//如果当前chunk包含已从主bundle中拆分出的模块，则被重用，而不是生成新的模块
			},
			default:{
				minChunk:2,//这里的minChunks权重更大
				priority:-20,
				reuseExistingChunk:true,
			}
		}
	}
}

模块命名

import(/* webpackChunkName: "math" */ "./js/main")

output:{
	//打包输出文件命名
	chunkFilename:"static/js/[name].js"
}

统一图片字体命名

output：{
	assetModuleFilename:"static/media/[hash:10][ext][query]"
}
版权声明：本文为qq_47824967原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。