webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理

news2024/12/25 9:17:05

一、将css打包到单独的文件

在这里插入图片描述
如上图：
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，如果网络比较慢的话会出现闪屏现象，用户体验不好

我们去控制台将往速调慢，然后运行打包好的index.html文件
在这里插入图片描述

如图：
在这里插入图片描述
在这里插入图片描述
会出现一段闪屏现象。

我们应该是单独的 Css 文件，通过 link 标签加载性能才好
想要实现link自动引入，我们需要借助webpack的miniCssExtractPlugin插件
具体配置步骤如下：

官网教程 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成单独文件
   		 new MiniCssExtractPlugin({
    	  // 定义输出文件名和目录
     	 filename: "css/main.css",
   		 })
    ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

在以前的章节中，我们配置过的生产环境的打包文件，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 插件

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "../dist"),
    // filename: js文件输出文件名
    filename: "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"],
      },
      {
        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的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 images 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          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$/, // 转译哪些文件
        exclude: /(node_modules|bower_components)/, // 排除哪些文件夹中的js文件不用转译
        // use: {
        loader: 'babel-loader',
        //   options: {
        //     presets: ['@babel/preset-env'] // 添加预设，转译js文件
        //   }
        // }
      }
    ],
  },
  // 插件
  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: "css/main.css",
    }),
  ],
  // 模式
  mode: "production", // 生产模式
};

⚠️ 注意，如果你从 webpack 入口处导入CSS 或者在 初始 chunk 中引入 style， mini-css-extract-plugin 则不会将这些CSS 加载到页面中。请使用 html-webpack-plugin 自动生成 link 标签或者在创建 index.html 文件时使用 link 标签。

3. 执行打包

配置好之后运行npm run build打生产环境的包
在这里插入图片描述
如图，css文件已经被处理成了单独的文件了。

二、css兼容性处理

兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader

1. 下载安装

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

2. 配置webpack.prod.js

  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
     ]

由于咱的配置中多处用到了上面的loader,所以我们将其抽离成一个函数：

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    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", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "../dist"),
    // filename: js文件输出文件名
    filename: "js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        // 用来匹配.less结尾的文件
        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的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 images 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          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$/, // 转译哪些文件
        exclude: /(node_modules|bower_components)/, // 排除哪些文件夹中的js文件不用转译
        // use: {
        loader: 'babel-loader',
        //   options: {
        //     presets: ['@babel/preset-env'] // 添加预设，转译js文件
        //   }
        // }
      }
    ],
  },
  // 插件
  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: "css/main.css",
    }),
  ],
  // 模式
  mode: "production", // 生产模式
};

3. 控制兼容性

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

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

想要知道更多的 browserslist 配置，查看browserslist 文档
以上为了测试兼容性所以设置兼容浏览器 ie8 以上。
实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

4. 执行打包

npm run build

在这里插入图片描述
在这里插入图片描述

如上图自动为我们加上了兼容性
到这里兼容性的配置就完成了

三、 css压缩

在这里插入图片描述
如图，这是目前打包生成的main.css文件，并没有为我们压缩处理，想要压缩，我们需要借助css-minimizer-webpack-plugin插件，配置步骤如下：

1. 下载安装

npm i css-minimizer-webpack-plugin -D

2. 配置

用法很简单，引入，然后在plugin配置对象中添加就可以了
完整代码如下：

// 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", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "../dist"),
    // filename: js文件输出文件名
    filename: "js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        // 用来匹配.less结尾的文件
        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的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 images 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          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$/, // 转译哪些文件
        exclude: /(node_modules|bower_components)/, // 排除哪些文件夹中的js文件不用转译
        // use: {
        loader: 'babel-loader',
        //   options: {
        //     presets: ['@babel/preset-env'] // 添加预设，转译js文件
        //   }
        // }
      }
    ],
  },
  // 插件
  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: "css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // 模式
  mode: "production", // 生产模式
};

3. 打包

npm run build

效果如图，可以看到已经帮我们压缩处理了css文件
在这里插入图片描述
这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/645131.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JDK version和class file version对应关系

JDK version和class file version对应关系

https://docs.oracle.com/javase/specs/jvms/se20/html/jvms-4.html#jvms-4.1 表 4.1-A. 类文件格式主要版本 Java SEReleasedMajorSupported majors1.0.2May 199645451.1February 199745451.2December 19984645 .. 461.3May 20004745 .. 471.4February 20024845 .. 485.0Sept…
阅读更多...
手把手教你实战TDD | 京东云技术团队

手把手教你实战TDD | 京东云技术团队

1. 前言 领域驱动设计，测试驱动开发。 我们在《手把手教你落地DDD》一文中介绍了领域驱动设计（DDD）的落地实战，本文将对测试驱动开发（TDD）进行探讨，主要内容有：TDD基本理解、TDD常…
阅读更多...
depcheck检查缺失的或者位使用的依赖

depcheck检查缺失的或者位使用的依赖

depcheck它可以帮助我们找出问题，在 package.json 中，每个依赖包如何被使用、哪些依赖包没有用处、哪些依赖包缺失。它是解决前端项目中依赖包清理问题的一个常用工具 depcheck官方文档地址 Github：https://github.com/depcheck/depcheck 1…
阅读更多...
笔记本触摸板没反应？1分钟，快速解决！

笔记本触摸板没反应？1分钟，快速解决！

案例：在使用笔记本电脑时，我喜欢使用触摸板进行一些电脑上的操作。但是最近我的触摸板突然没反应，不能使用。有小伙伴知道这是什么原因吗？该如何解决呀？ 笔记本电脑已经成为我们日常生活和工作中不可或缺的工具。然而…
阅读更多...
光传感芯片产品应用领域解析

光传感芯片产品应用领域解析

光传感产品主要应用于穿戴心率等健康检测、安防环境光监测、智能家居环境光感测、智慧电子产品自动控制、工业自动控制及安全检查、控制。 WH光感材料特点： 1、双波普独立通道，独立控制 2、波谱响应波长可客制化定制： —环境光红蓝绿、光距感…
阅读更多...
企业邀请媒体报道活动，邀请本地媒体好，还是全国性的媒体好

企业邀请媒体报道活动，邀请本地媒体好，还是全国性的媒体好

传媒如春雨，润物细无声，大家好，我是51媒体网胡老师。 企业做活动在制定媒体策略，媒体传播规划的时候，往往不知道改如何选择，今天胡老师就来分享下本地媒体和全国性媒体的特点，帮助大家更好的制…
阅读更多...
SpringCloud搭建Eureka服务注册中心(六)

SpringCloud搭建Eureka服务注册中心(六)

前面说过eureka是c/s模式的 server服务端就是服务注册中心，其他的都是client客户端，服务端用来管理所有服务，客户端通过注册中心，来调用具体的服务； 我们先来搭建下服务端，也就是服务注册中心&#xff1b…
阅读更多...
uniapp小程序订阅消息推送+Thinkphp5后端代码教程示例

uniapp小程序订阅消息推送+Thinkphp5后端代码教程示例

记录一下通过uniapp开发小程序消息推送的实例，配合后端tp推送，之前写的项目是微信小程序而且后端是原生php，这次通过项目记录一下 目录 回顾access_token获取规则以及思路 第一步：设计前端触发订阅事件第二步：设计将to…
阅读更多...
1140道Java常见面试题及详细答案

1140道Java常见面试题及详细答案

最近感慨面试难的人越来越多了，一方面是市场环境，更重要的一方面是企业对 Java 的人才要求越来越高了。 基本上这样感慨的分为两类人： 第一，虽然挂着 3、5 年经验，但肚子里货少，也没啥拿得出手的项目&#…
阅读更多...
OPNET出现“Packet pointer references unowned packet(＜pk_id＞)”错误的解决办法

OPNET出现“Packet pointer references unowned packet(＜pk_id＞)”错误的解决办法

在使用 OPNET Modeler 软件时&#xff0c;会遇到很多奇奇怪怪的报错&#xff0c;今天要介绍的报错内容如下。 Packet pointer references unowned packet(<pk_id>). 程序中断的原因截图如下图所示。 由上图可以看到&#xff0c;引发错误的 OPNET 核心函数是 op_pk_send(…
阅读更多...
快速幂应用之剪绳子问题

快速幂应用之剪绳子问题

有这样一类问题&#xff0c;给你一个长度为n的绳子&#xff0c;要求你可以剪切任意次数&#xff0c;分为任意段&#xff0c;使得这些子段长度的乘积最大。我们把这类问题暂时先称为剪绳子&#xff0c;这种问题的解法也很简单&#xff0c;通过数学证明可以得出&#xff0c;我们优…
阅读更多...
​Java容器的继承关系​

​Java容器的继承关系​

Java容器的继承关系 Collection接口 Collection接口中所定义的方法 int size(); boolean isEmpty(); void clear(); boolean contains(Object element);//是否包含某个对象 boolean add(Object element); Iterator iterator(); boolean containsAll(Collection c);//是否包含另…
阅读更多...
MybatisPlus 实现数据拦截

MybatisPlus 实现数据拦截

基于配置文件实现&#xff08;关键key存储在配置文件&#xff0c;通过读取配置文件来实现动态拼接sql&#xff09; 1、创建注解类 UserDataPermission(id"app") 注&#xff1a;id用以区分是小程序还是应用程序 注解加的位置&#xff1a; 2、配置枚举类配置文件 E…
阅读更多...
学了Python后还用学R语言吗？

学了Python后还用学R语言吗？

学习R语言是否有必要取决于你的具体需求和背景。虽然R语言和Python都是数据科学领域广泛使用的编程语言&#xff0c;但它们之间还是存在一些差异。 如果你主要从事数据分析、统计建模或者数据可视化等工作&#xff0c;那么学习R语言可能更为适合。R语言在数据处理和统计分析方…
阅读更多...
【gcc, cmake, eigen, opencv,ubuntu】四.opencv安装和使用,获取opencv matiax 的指针

【gcc, cmake, eigen, opencv,ubuntu】四.opencv安装和使用,获取opencv matiax 的指针

文章目录 ubuntu系统安装opencv1.下载opencv和opencv_contrib2.安装指导3.Linux 下 fatal error: opencv2/opencv.hpp: 没有那个文件或目录4.g 和cmake 编译使用opencv的程序5.opencv,eigen速度比较6.opencv常用类型符号7.获取opencv matiax 的指针 ubuntu系统安装opencv 1.下…
阅读更多...
Java实训日志03

Java实训日志03

文章目录 八、项目开发实现步骤&#xff08;五&#xff09;创建数据库连接管理类1、创建数据库实用工具包2、创建数据库连接管理类&#xff08;1&#xff09;定义数据库连接属性常量&#xff08;2&#xff09;创建私有化构造方法&#xff08;3&#xff09;编写获取数据库连接静…
阅读更多...
关于C++数组名和指针的一些思考

关于C++数组名和指针的一些思考

在学习指针数组与数组指针一节时&#xff0c;了解到数组名其实是指向数组收个元素的指针。如下面代码所示 int main() {int a[5] {1, 2, 3, 4, 5};cout << "*a:" << *a << endl;cout << "*(a 1):" << *(a 1) << e…
阅读更多...
注解开发bean

注解开发bean

注解开发定义bean 使用component定义bean Component("bookDao") public class BookDaoImpl implements BookDao{} 核心配置文件中通过组件扫描加载bean <context:component-scan base-package"com.tsj"/> Spring提供Component注解的三个衍生注解…
阅读更多...
科研人必看 | 学术期刊论文作者署名新规

科研人必看 | 学术期刊论文作者署名新规

【SciencePub学术干货】在期刊上发表学术论文&#xff0c;是研究人员发布和传播学术研究成果的重要方式之一。学术期刊论文文献各项著录内容中&#xff0c;作者署名是最主要的组成部分之一。 随着经济的发展和社会的进步&#xff0c;人们面临的科学问题和社会问题日趋复杂&…
阅读更多...
KaiwuDB 受邀亮相 IOTE 2023 第十九届国际物联网展

KaiwuDB 受邀亮相 IOTE 2023 第十九届国际物联网展

5月17日&#xff0c;IOTE 2023 第十九届国际物联网展在上海拉开序幕&#xff0c;全球超过 350 家参展企业到场展示先进的物联网技术和产品&#xff0c;行业专家、领军企业代表等人物齐聚一堂&#xff0c;共话 IoT 未来趋势。KaiwuDB 受邀亮相参展并就《工业物联网产业数字化转型…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023