【Webpack】CSS 处理

谢尔登2024-02-18 13:13

CSS 处理

提取 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", // 将 js 文件输出到 static/js 目录中
    clean: true,
    },
    module: {
    rules: [
    {
    // 用来匹配 .css 结尾的文件
    test: /.css/, // use 数组里面 Loader 执行顺序是从右到左 use: [MiniCssExtractPlugin.loader, "css-loader"], }, { test: /.less/,
    use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
    },
    {
    test: /.s[ac]ss/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /.styl/,
    use: [MiniCssExtractPlugin.loader, "css-loader", "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?)/,
    type: "asset/resource",
    generator: {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

3. 运行指令

复制代码 
npm run build

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", // 将 js 文件输出到 static/js 目录中
    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?)/,
    type: "asset/resource",
    generator: {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

3. 控制兼容性

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

复制代码 
{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档open in new window

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

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

复制代码 
{
  // 其他省略
  "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-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 目录中
    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?)/,
    type: "asset/resource",
    generator: {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

5. 运行指令

复制代码 
npm run build

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-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 目录中
    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?)/,
    type: "asset/resource",
    generator: {
    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",
    }),
    // css压缩
    new CssMinimizerPlugin(),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

3. 运行指令

复制代码 
npm run build

默认生产模式已经开启了：html 压缩和 js 压缩，所以她们不需要额外进行配置。

相关推荐
spionbo8 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝9 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
lyc2333339 分钟前
鸿蒙Core File Kit：极简文件管理指南📁
前端
我这里是好的呀9 分钟前
全栈开发个人博客12.嵌套评论设计
前端·全栈
我这里是好的呀11 分钟前
全栈开发个人博客13.AI聊天设计
前端·全栈
金金金__11 分钟前
Element-Plus：popconfirm与tooltip一起使用不生效？
前端·vue.js·element
lyc23333312 分钟前
小L带你看鸿蒙应用升级的数据迁移适配📱
前端
用户268128510666918 分钟前
react-pdf（pdfjs-dist）如何兼容老浏览器（chrome 49）
前端
阿怼丶18 分钟前
🚀 如何在内网中运行 Cesium？基于 NestJS 构建离线地形与影像服务
前端·gis
热门推荐
01【图像处理与机器视觉】XJTU期末考点02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04海康Visionmaster-常见问题排查方法-启动阶段05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07Coze扣子平台完整体验和实践（附国内和国际版对比）08DeepSeek各版本说明与优缺点分析09VMware虚拟机安装Win7专业版保姆级教程（附镜像包）10R-tree详解