webpack的配置

const path = require('path');
// 引入node核心模块用来拿到当前文件的绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 安装 npm install --save-dev html-webpack-plugin
// 这个插件用来生成html文件,会帮你自动引入要打包的js,无需自动引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 安装 npm install mini-css-extract-plugin -D
// 这个插件帮助我们来实现css代码的抽离
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 安装 npm install css-minimizer-webpack-plugin -D
// 这个插件帮助我们来实现css代码的压缩

module.exports = {
	// 模块导出里面写webpack.config
	mode: 'production',
	// 模式(在什么环境下进行打包)
	// development : 开发模式。此时产生的代码(dist/main.js) 还是可以读的，体积很大
	// production: 生产模式。它会自动启用 webpack 内部的一些优化措施，例如：压缩，混淆，加密.......， 总之是让代码不可读，不可还原
	entry: {
		index: './src/index.js',
	}, //入口文件
	// 配置入口(从哪里开始解析)
	output: {
		filename: 'buird.js', //出口文件名字默认叫main.js
		// 文件名
		path: path.join(__dirname, 'dist'),
		// 设置出口文件夹的位置(这个位置必须是绝对路径所以引入node中的path用path.join(__dirname)来拿到当前文件的绝对路径)
		clean: true,
		// 清除上次打包的内容
		assetModuleFilename: 'images/[contenthash][ext]',
		// 设置资源模块的路径和文件名
		// 第一个[]是资源名第二个[]就是资源扩展名
		// contenthash就是根据文件的内容生成一个hash(哈希)的字符串
		//	ext就是使用原资源的扩展名
	},
	// 配置出口
	devtool: 'inline-source-map',
	// 用webpage打包的项目报错只会定位到打包后的文件中,设置devtool:'inline-source-map'可以将错误直接定位在打包前的源文件中
	// 并且可以在打包的js中直观的看到我们打包前的源代码
	plugins: [
		new HtmlWebpackPlugin({
			template: './index.html',
			// template模板 关联 基于根目录下的src文件夹下index.html模板去生成打包的html
			filename: 'app.html',
			// 文件名 打包出来html的文件名
			inject: 'body',
			// 设置在html哪里生成script标签
		}),
		// 使用这个插件用来生成html文件,会帮你自动引入要打包的js,无需自动引入
		new MiniCssExtractPlugin({
			filename: 'styles/[contenthash].css',
			// 文件名 提取出来的css路径和名字
		}),
		// 使用这个插件会将css提取到单独的文件中，为每个包含css的js文件创建一个css文件
	],
	// plugins插件 工具
	devServer: {
		static: path.join(__dirname, './dist'),
		// 指向基于的物理路径(输出dist打包文件到服务器上)
		port: '8888',
		// 端口号
		host: 'localhost',
		// 开发运行时域名，设置成'0.0.0.0',在同一个局域网下,如果你的项目在运行，同时可以通过你的http://ip:port/...访问你的项目
		open: true,
		// 默认是否打开浏览器
	},
	// webpackDevServer(开发服务器)并没有输出任何的物理文件，他把输出的打包文件放在内存里面，删除打包文件依然可以正常的运行
	module: {
		rules: [
			{
				// rules里面配置规则
				test: /\.png$/,
				// test正则验证(验证规则在哪里生效)
				type: 'asset/resource',
				// type配置资源类型
				// resource会导出图片,并绑定导出图片的url
				generator: {
					filename: 'images/[contenthash][ext]',
				},
				// generator里面来设置资源模块的路径和文件名
			},
			{
				test: /\.jpg$/,
				// 正则
				type: 'asset/inline',
				// 配置资源类型
				// inline不会导出图片，绑定的是Date URL base64的格式
			},
			{
				test: /\.txt$/,
				// 正则
				type: 'asset/source',
				// 配置资源类型
				// source用于导出资源中的源代码
			},
			{
				test: /\.gif$/,
				type: 'asset',
				// 配置资源类型
				// asset是通用资源类型在resource和inline之前按照大小去做出选择
				parser: {
					dataUrlCondition: {
						maxSize: 4 * 1024 * 1024,
					},
					// 设置当图片大于maxSize值的时候采取resource小于则采取inlne
				},
				// parser解析器
			},
			{
				test: /\.css$/,
				// use:['style-loader','css-loader']
				// 用css-loader让webpage去解析css,用styleloader把css挂载到页面上
				// 这个loader的顺序不能变，因为loader是从右往左执行，我们先要让webpack去解析css，然后再用style把css挂载到页面上使用
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
				// 通过MiniCssExtractPlugin插件中的loader把css挂载到页面上,之后通过MiniCssExtractPlugin插件设置的把css给放在单独的文件中去
			},
			{
				test: /\.js$/,
				// 正则验证
				exclude: /node_modules/,
				// 排除 node_modules中的js
				use: {
					loader: 'babel-loader',
					// 用babelLoader来解析js
					options: {
						// options来去配置参数
						presets: ['@babel/preset-env'],
						// presets配置预设
					},
				},
			},
		],
	},
	// 配置模块
	optimization: {
		minimizer: [
			new CssMinimizerPlugin(),
			// 使用CssMinimizerPlugin来实现css代码的压缩(mode必须是production)
		],
		// minimizer里面允许通过webpage插件去覆盖默认压缩工具
	},
	// 优化的配置
};