webpack5-基础入门-06 提前css成单独文件 压缩 样式兼容 封装

本文介绍了如何使用Webpack优化CSS处理,包括将CSS从JS文件中提取到单独的文件以避免闪屏现象,使用MiniCssExtractPlugin实现CSS文件独立加载,以及通过PostCSS和postcss-preset-env解决样式兼容性问题。此外,还展示了如何配置Webpack的loader规则以处理不同类型的CSS预处理器文件,并设置了图片和字体资源的处理方式。最后,提到了CSS和HTML的压缩以及生产模式的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css处理

提取Css成单独文件

css文件目前被打包到JS 文件中 当 JS文件加载时 会创建一个style标签生成样式

会出现闪屏现象

创建单独CSS文件 通过link标签加载性能才好

MiniCssExtractPlugin

安装:npm install --save-dev mini-css-extract-plugin

将webpack.dev.js 中 style-loader 替换成 MiniCssExtractPlugin.loader

plugins 引入

	new MiniCssExtractPlugin(
		filename:'static/css/main.css'
		),

打包:npm run build

Css兼容性处理

安装: npm i postcss-loader postcss postcss-preset-env -D

配置  css-loaders后面 

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin'); //引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
	template
} = require("lodash");

module.exports = {
	entry: "./src/main.js",
	output: {
		path: path.resolve(__dirname, "../dist"),
		filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
		//自動清空上次打包结果
		//原理:在打包前,将path整个目录内容清空,再进行打包
		clean: true,
	},
	module: {
		rules: [{
				// 用来匹配 .css 结尾的文件
				test: /\.css$/,
				// use 数组里面 Loader 执行顺序是从右到左
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [
									"postcss-preset-env", // 能解决大多数样式兼容性问题
								],
							},
						},
					},
				],
			},
			{
				test: /\.less$/,
				use: [MiniCssExtractPlugin.loader,
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [
									"postcss-preset-env", // 能解决大多数样式兼容性问题
								],
							},
						},
					},
					"less-loader"
				],
			},
			{
				test: /\.s[ac]ss$/,
				use: [MiniCssExtractPlugin.loader, "css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [
									"postcss-preset-env", // 能解决大多数样式兼容性问题
								],
							},
						},
					},
					"sass-loader"
				],
			},
			{
				test: /\.styl$/,
				use: [MiniCssExtractPlugin.loader, "css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [
									"postcss-preset-env", // 能解决大多数样式兼容性问题
								],
							},
						},
					},
					"stylus-loader"
				],
			},
			{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
					},
				},
				generator: {
					// 将图片文件输出到 static/imgs 目录中
					// 将图片文件命名 [hash:8][ext][query]
					// [hash:8]: hash值取8位
					// [ext]: 使用之前的文件扩展名
					// [query]: 添加之前的query参数
					filename: "static/imgs/[hash:8][ext][query]",
				},
			},
			//配置字体
			{
				test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
				type: "asset/resource",
				generator: {
					filename: "static/media/[hash:8][ext][query]",
				},
			},
			{
				test: /\.m?js$/,
				exclude: /node_modules/, //排除node包中的js文件不处理
				use: {
					loader: 'babel-loader',
					// options: {
					//   presets: ['@babel/preset-env']
					// }
				}
			}
		],
	},
	plugins: [
		new ESLintPlugin({
			//检测哪些文件
			context: path.resolve(__dirname, "../src"),
		}),
		new HtmlWebpackPlugin(
			// 以 public/index.html 为模板创建文件
			// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
			{
				template: path.resolve(__dirname, "../public/index.html"),
			}
		),
			new MiniCssExtractPlugin({
		filename:'static/css/main.css'
			}),
	],

	//模式
	mode: "production",
};

package.json 配置   做ie8兼容

  "browserslist": [
      "ie >=8"
  ]

//实际开发中我们一般不考虑旧版本浏览器了,所以我们可以这样设置

//  "browserslist": ["last 2 version", "> 1%", "not dead"]

{
  "browserslist": [

"last 2 version",  //所有浏览器最近2个版本

"> 1%", //覆盖99%的浏览器

"not dead" 

]}

优化简写   webpack.prod.js 代码

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin'); //引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
	template
} = require("lodash");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
	entry: "./src/main.js",
	output: {
		path: path.resolve(__dirname, "../dist"),
		filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
		//自動清空上次打包结果
		//原理:在打包前,将path整个目录内容清空,再进行打包
		clean: true,
	},
	module: {
		rules: [{
				// 用来匹配 .css 结尾的文件
				test: /\.css$/,
				// use 数组里面 Loader 执行顺序是从右到左
				use:getStyleLoaders(),
			},
			{
				test: /\.less$/,
			    use: getStyleLoaders("less-loader"),
			},
			{
				test: /\.s[ac]ss$/,
				  use: getStyleLoaders("sass-loader"),
			},
			{
				test: /\.styl$/,
			   use: getStyleLoaders("stylus-loader"),
			},
			{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
					},
				},
				generator: {
					// 将图片文件输出到 static/imgs 目录中
					// 将图片文件命名 [hash:8][ext][query]
					// [hash:8]: hash值取8位
					// [ext]: 使用之前的文件扩展名
					// [query]: 添加之前的query参数
					filename: "static/imgs/[hash:8][ext][query]",
				},
			},
			//配置字体
			{
				test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
				type: "asset/resource",
				generator: {
					filename: "static/media/[hash:8][ext][query]",
				},
			},
			{
				test: /\.m?js$/,
				exclude: /node_modules/, //排除node包中的js文件不处理
				use: {
					loader: 'babel-loader',
					// options: {
					//   presets: ['@babel/preset-env']
					// }
				}
			}
		],
	},
	plugins: [
		new ESLintPlugin({
			//检测哪些文件
			context: path.resolve(__dirname, "../src"),
		}),
		new HtmlWebpackPlugin(
			// 以 public/index.html 为模板创建文件
			// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
			{
				template: path.resolve(__dirname, "../public/index.html"),
			}
		),
		new MiniCssExtractPlugin({
		filename:'static/css/main.css'
			}),
	],

	//模式
	mode: "production",
};

CSS压缩  CssMinimizerWebpackPlugin

安装:npm install css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");



plugins: [
		new CssMinimizerPlugin(),
	],

html 压缩 JS压缩  生产模式默认开启压缩 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值