一、將css打包到單獨(dú)的文件
如上圖：Css 文件目前被打包到 js 文件中，當(dāng) js 文件加載時(shí)，會(huì)創(chuàng)建一個(gè) style 標(biāo)簽來生成樣式
這樣對(duì)于網(wǎng)站來說，如果網(wǎng)絡(luò)比較慢的話會(huì)出現(xiàn)閃屏現(xiàn)象，用戶體驗(yàn)不好
我們?nèi)タ刂婆_(tái)將往速調(diào)慢，然后運(yùn)行打包好的index.html文件
如圖：
會(huì)出現(xiàn)一段閃屏現(xiàn)象。
我們應(yīng)該是單獨(dú)的 Css 文件，通過 link 標(biāo)簽加載性能才好
想要實(shí)現(xiàn)link自動(dòng)引入，我們需要借助webpack的miniCssExtractPlugin插件
具體配置步驟如下：
官網(wǎng)教程 https://webpack.docschina.org/plugins/mini-css-extract-plugin/
1. 下載依賴
npm i mini-css-extract-plugin -D
2. 配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
// 提取css成單獨(dú)文件
new MiniCssExtractPlugin({
// 定義輸出文件名和目錄
filename: "css/main.css",
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
在以前的章節(jié)中，我們配置過的生產(chǎn)環(huán)境的打包文件，webpack.prod.js
咱將上面的配置添加到生產(chǎn)配置中，完整代碼如下：
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入 mini-css-extract-plugin 插件
module.exports = {
// 入口
// 相對(duì)路徑和絕對(duì)路徑都行
entry: "./src/main.js",
// 輸出
output: {
// path: 文件輸出目錄，必須是絕對(duì)路徑
// path.resolve()方法返回一個(gè)絕對(duì)路徑
// __dirname 當(dāng)前文件的文件夾絕對(duì)路徑
path: path.resolve(__dirname, "../dist"),
// filename: js文件輸出文件名
filename: "js/main.js",
clean: true, // 自動(dòng)將上次打包目錄資源清空
},
// 加載器
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
// 用來匹配.less結(jié)尾的文件
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
// 用來匹配圖片文件
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會(huì)被base64處理
},
},
generator: {
// 將圖片文件輸出到 images 目錄中
// 將圖片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件擴(kuò)展名
// [query]: 添加之前的query參數(shù)
filename: "images/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource", // 以文件資源的形式輸出
generator: {
filename: "media/[hash:8][ext][query]", // 輸出到media目錄中
},
},
{
test: /\.m?js$/, // 轉(zhuǎn)譯哪些文件
exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉(zhuǎn)譯
// use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'] // 添加預(yù)設(shè)，轉(zhuǎn)譯js文件
// }
// }
}
],
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模板創(chuàng)建文件
// 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成單獨(dú)文件
new MiniCssExtractPlugin({
// 定義輸出文件名和目錄
filename: "css/main.css",
}),
],
// 模式
mode: "production", // 生產(chǎn)模式
};
?? 注意，如果你從 webpack 入口處導(dǎo)入CSS 或者在 初始 chunk 中引入 style， mini-css-extract-plugin 則不會(huì)將這些CSS 加載到頁面中。請(qǐng)使用 html-webpack-plugin 自動(dòng)生成 link 標(biāo)簽或者在創(chuàng)建 index.html 文件時(shí)使用 link 標(biāo)簽。
3. 執(zhí)行打包
配置好之后運(yùn)行npm run build打生產(chǎn)環(huán)境的包
如圖，css文件已經(jīng)被處理成了單獨(dú)的文件了。
二、css兼容性處理
兼容性在以前一直是個(gè)比較令大家頭疼的事情，尤其是那時(shí)候還得兼容IE，webpack肯定是考慮到了這些，實(shí)現(xiàn)樣式兼容性，我們需要借助幾個(gè)loader
1. 下載安裝
npm i postcss-loader postcss postcss-preset-env -D
2. 配置webpack.prod.js
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
],
},
},
},
],
},
]
由于咱的配置中多處用到了上面的loader,所以我們將其抽離成一個(gè)函數(shù)：
// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
],
},
},
},
preProcessor,
].filter(Boolean);
};
完整的配置代碼：
- webpack.prod.js
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入 mini-css-extract-plugin 插件
// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
// 入口
// 相對(duì)路徑和絕對(duì)路徑都行
entry: "./src/main.js",
// 輸出
output: {
// path: 文件輸出目錄，必須是絕對(duì)路徑
// path.resolve()方法返回一個(gè)絕對(duì)路徑
// __dirname 當(dāng)前文件的文件夾絕對(duì)路徑
path: path.resolve(__dirname, "../dist"),
// filename: js文件輸出文件名
filename: "js/main.js",
clean: true, // 自動(dòng)將上次打包目錄資源清空
},
// 加載器
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: getStyleLoaders(),
},
{
// 用來匹配.less結(jié)尾的文件
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
// 用來匹配圖片文件
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會(huì)被base64處理
},
},
generator: {
// 將圖片文件輸出到 images 目錄中
// 將圖片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件擴(kuò)展名
// [query]: 添加之前的query參數(shù)
filename: "images/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource", // 以文件資源的形式輸出
generator: {
filename: "media/[hash:8][ext][query]", // 輸出到media目錄中
},
},
{
test: /\.m?js$/, // 轉(zhuǎn)譯哪些文件
exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉(zhuǎn)譯
// use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'] // 添加預(yù)設(shè)，轉(zhuǎn)譯js文件
// }
// }
}
],
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模板創(chuàng)建文件
// 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成單獨(dú)文件
new MiniCssExtractPlugin({
// 定義輸出文件名和目錄
filename: "css/main.css",
}),
],
// 模式
mode: "production", // 生產(chǎn)模式
};
3. 控制兼容性
我們可以在 package.json 文件中添加browserslist來控制樣式的兼容性做到什么程度。
{
// 其他省略
"browserslist": ["ie >= 8"]
}
想要知道更多的 browserslist 配置，查看browserslist 文檔
以上為了測(cè)試兼容性所以設(shè)置兼容瀏覽器 ie8 以上。
實(shí)際開發(fā)中我們一般不考慮舊版本瀏覽器了，所以我們可以這樣設(shè)置：
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
4. 執(zhí)行打包
npm run build
如上圖自動(dòng)為我們加上了兼容性
到這里兼容性的配置就完成了
三、 css壓縮
如圖，這是目前打包生成的main.css文件，并沒有為我們壓縮處理，想要壓縮，我們需要借助css-minimizer-webpack-plugin插件，配置步驟如下：
1. 下載安裝
npm i css-minimizer-webpack-plugin -D
2. 配置
用法很簡(jiǎn)單，引入，然后在plugin配置對(duì)象中添加就可以了
完整代碼如下：
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入 mini-css-extract-plugin 插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解決大多數(shù)樣式兼容性問題
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
// 入口
// 相對(duì)路徑和絕對(duì)路徑都行
entry: "./src/main.js",
// 輸出
output: {
// path: 文件輸出目錄，必須是絕對(duì)路徑
// path.resolve()方法返回一個(gè)絕對(duì)路徑
// __dirname 當(dāng)前文件的文件夾絕對(duì)路徑
path: path.resolve(__dirname, "../dist"),
// filename: js文件輸出文件名
filename: "js/main.js",
clean: true, // 自動(dòng)將上次打包目錄資源清空
},
// 加載器
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: getStyleLoaders(),
},
{
// 用來匹配.less結(jié)尾的文件
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
{
// 用來匹配圖片文件
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會(huì)被base64處理
},
},
generator: {
// 將圖片文件輸出到 images 目錄中
// 將圖片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件擴(kuò)展名
// [query]: 添加之前的query參數(shù)
filename: "images/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource", // 以文件資源的形式輸出
generator: {
filename: "media/[hash:8][ext][query]", // 輸出到media目錄中
},
},
{
test: /\.m?js$/, // 轉(zhuǎn)譯哪些文件
exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉(zhuǎn)譯
// use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'] // 添加預(yù)設(shè)，轉(zhuǎn)譯js文件
// }
// }
}
],
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模板創(chuàng)建文件
// 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成單獨(dú)文件
new MiniCssExtractPlugin({
// 定義輸出文件名和目錄
filename: "css/main.css",
}),
// css壓縮
new CssMinimizerPlugin(),
],
// 模式
mode: "production", // 生產(chǎn)模式
};
3. 打包
npm run build文章來源：http://www.zghlxwxcb.cn/news/detail-493968.html
效果如圖，可以看到已經(jīng)幫我們壓縮處理了css文件
這就是本章的內(nèi)容拉，webpack處理css文件打包到單獨(dú)的文件、壓縮、以及兼容性處理文章來源地址http://www.zghlxwxcb.cn/news/detail-493968.html
到了這里，關(guān)于webpack處理CSS文件，打包到單獨(dú)的文件、壓縮、以及兼容性處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
