玖叶教程网

前端编程开发入门

2024年04月02日

webpack5入门到实战 (8-生产模式css处理)

css处理

1. 提取 Css 成单独文件

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样对于网站来说，会出现闪屏现象，用户体验不好，应该是单独的 Css 文件，通过 link 标签加载性能才好

(1) 下载包

npm i mini-css-extract-plugin -D

(2) 配置

? webpack.prod.js

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
//入口：相对路径和绝对路径都行
entry: './src/main.js',
//输出
output: {
path: path.resolve(__dirname, '../dist'), // 生产模式需要输出
filename: 'static/js/main.js',
clean:true,
},
//加载器
module: {
rules: [
{
//用来配置.css结尾的文件
test: /\.css$/,
//use数组里面Loader执行顺序是从右到左
use:[MiniCssExtractPlugin.loader, 'css-loader']
},
{
//用来配置.less结尾的文件
test:/\.less$/,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
//用来配置.sass或者.scss结尾的文件
test:/\.s[ac]ss$/,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
//用来配置.styl结尾的文件
test:/\.styl$/,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']
},
{
//用来配置图片文件
test:/\.(png|jpe?g|gif|webp)$/,
type:'asset',
parser:{
dataUrlCondition:{
maxSize:50*1024 // 小于50kb的图片会被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?|map4|map3|avi)$/,
type:'asset/resource',
generator:{
/**
* 将文件输出到 static/media 目录中
* 将图片文件命名 [hash:8][ext][query]
* [hash:8]: hash值取8位
* [ext]: 使用之前的文件扩展名
* [query]: 添加之前的query参数
*/
filename: 'static/media/[hash:8][ext][query]'
},
},
{
test:/\.js$/,
exclude:/node_modules/, // 排除node_modules代码不编译
loader:'babel-loader'
},

]
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname,'../src')
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname,'../public/index.html')
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename:'static/css/main.css'
})
],
//模式
mode:'production', //生产模式
};

? 运行命令

npm run build


2. Css 兼容性处理

(1) 下载包

npm i postcss-loader postcss postcss-preset-env -D

(2) 配置

? webpack.prod.js

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
//入口：相对路径和绝对路径都行
entry: './src/main.js',
//输出
output: {
path: path.resolve(__dirname, '../dist'), // 生产模式需要输出
filename: 'static/js/main.js',
clean:true,
},
//加载器
module: {
rules: [
{
//用来配置.css结尾的文件
test: /\.css$/,
//use数组里面Loader执行顺序是从右到左
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
'postcss-preset-env', // 能解决大多数样式兼容性问题
]
}
}
}
]
},
{
//用来配置.less结尾的文件
test:/\.less$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
'postcss-preset-env', // 能解决大多数样式兼容性问题
]
}
}
},
'less-loader']
},
{
//用来配置.sass或者.scss结尾的文件
test:/\.s[ac]ss$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
'postcss-preset-env', // 能解决大多数样式兼容性问题
]
}
}
},
'sass-loader']
},
{
//用来配置.styl结尾的文件
test:/\.styl$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
'postcss-preset-env', // 能解决大多数样式兼容性问题
]
}
}
},
'stylus-loader']
},
......
]
},
//插件
plugins: [
......
],
//模式
mode:'production', //生产模式
};

(3) 控制兼容性

可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
"name": "webpack_code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
},
"browserslist": ["ie >= 8"],
"keywords": [],
......
}

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

{
......
"browserslist": ["last 2 version", "> 1%", "not dead"],
......
}

(4) 合并配置

? webpack.prod.js

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) =>{
return [
MiniCssExtractPlugin.loader, // 提取css成单独文件
"css-loader", // 将css资源编译成commonjs的模块到js中
{
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',
clean:true,
},
//加载器
module: {
rules: [
{
//用来配置.css结尾的文件
test: /\.css$/,
//use数组里面Loader执行顺序是从右到左
use: getStyleLoaders()
},
{
//用来配置.less结尾的文件
test:/\.less$/,
use: getStyleLoaders('less-loader')
},
{
//用来配置.sass或者.scss结尾的文件
test:/\.s[ac]ss$/,
use:getStyleLoaders('sass-loader')
},
{
//用来配置.styl结尾的文件
test:/\.styl$/,
use:getStyleLoaders('stylus-loader')
},
......
]
},
//插件
plugins: [
......
],
//模式
mode:'production', //生产模式
};

3. Css 压缩

(1) 下载包

npm i css-minimizer-webpack-plugin -D

(2) 配置

? webpack.prod.js

const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) =>{
return [
MiniCssExtractPlugin.loader, // 提取css成单独文件
"css-loader", // 将css资源编译成commonjs的模块到js中
{
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',
clean:true,
},
//加载器
module: {
rules: [
......
]
},
//插件
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname,'../src')
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname,'../public/index.html')
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename:'static/css/main.css'
}),
// css压缩
new CssMinimizerPlugin(),
],
//模式
mode:'production', //生产模式
};

标签：less-loader 

作者:gojiuye , 分类:技术精选 , 浏览:21 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言