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

被折叠的 条评论
为什么被折叠?



