Webpack打包工具基本配置模板

博主： Moody
发布时间：2021 年 07 月 07 日
2011 次浏览
暂无评论
2793字数
分类：模板笔记

![webpack][1]

##需求插件##
  √> npm i html-webpack-plugin
   npm i mini-css-extract-plugin
   npm i css-minimizer-webpack-plugin

const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
	const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
	const { type } = require('os');

module.exports = {
		// !入口 默认即可
		// *默认路径为entry:  ./src/index.js
		// entry: './src/demo.js',
		// !出口 默认即可
		// output: {
		// 	path: path.join(__dirname, 'aa'),
		// 	filename: 'demo.js',
		// },
		// !模式
		// *production 生产模式 (上线代码  压.缩 混淆) 体积小 访问速度快 缺点打包速度慢
		mode: 'production',
		// 生产模式配置
		devtool: 'nosources-source-map',
		// *开发模式 压缩速度快
		// mode: 'development',
		// 开发模式的配置
		// devtool: 'eval-source-map',

//!插件
		plugins: [
			new HtmlWebpackPlugin({
				//模板html
				template: './src/index.html',
			}),
			new MiniCssExtractPlugin({
				filename: 'css/[name].css',
			}),
		],
		optimization: {
			minimizer: [
				// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 js代码也启用压缩）
				`...`, // 如果没有这行代码，JS代码就不会压缩
				new CssMinimizerPlugin(),
			],
		},
		// module 来配置 webpack 的loader 让webpack 支持解析处理其他类型的文件
		module: {
			// 规则
			rules: [
				{
					// 匹配所有的 .css结尾的文件
					test: /\.css$/,
					use: [
						// 给MiniCssExtractPlugin.loader 来设置 publicPath 选项
						{
							loader: MiniCssExtractPlugin.loader,
							options: {
								publicPath: '../',
							},
						},
						'css-loader',
					],
				},
				{
					// 匹配所有的 .less结尾的文件
					test: /\.less$/,
					use: [
						{
							loader: MiniCssExtractPlugin.loader,
							options: {
								publicPath: '../',
							},
						},
						'css-loader',
						'less-loader',
					],
				},
				{
					// test: /\.jpeg|jpg|png|gif/,
					test: /\.(png|jpg|gif|jpeg)$/i,
					type: 'asset',
					parser: {
						dataUrlCondition: {
							maxSize: 2 * 1024,
						},
					},
					generator: {
						// 超过maxSize的图片文件生成到imgs目录中
						filename: 'imgs/[hash][ext][query]',
					},
				},
				{
					test: /\.(eot|svg|ttf|woff|woff2)$/,
					type: 'asset/resource',
					generator: {
						// 所有的字体图标文件生成到fonts目录中
						filename: 'fonts/[hash][ext][query]',
					},
				},
				{
					test: /\.js$/,
					// 排除node_modules文件件下的js文件
					exclude: /(node_modules|bower_components)/,
					use: {
						loader: 'babel-loader',
						options: {
							presets: ['@babel/preset-env'],
						},
					},
				},
			],
		},
		devServer: {
			contentBase: path.join(__dirname, 'dist'),
			compress: true,
			open: true, // 自动打开浏览器
			port: 2333, // 端口号
		},
	};

[1]: https://z3.ax1x.com/2021/07/07/RHuQcq.jpg

END

最后修改：2021 年 09 月 08 日