1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：jieyucx 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
如上图：
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，如果网络比较慢的话会出现闪屏现象，用户体验不好

我们去控制台将往速调慢，然后运行打包好的index.html文件
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理

如图：
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
会出现一段闪屏现象。

我们应该是单独的 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打生产环境的包
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
如图，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

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

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

三、 css压缩

webpack处理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文件，打包到单独的文件、压缩、以及兼容性处理
这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理文章来源地址https://www.toymoban.com/news/detail-493968.html

到了这里，关于webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

    参考地址：https://v4.webpack.js.org/plugins/compression-webpack-plugin/ 一、compression-webpack-plugin的使用，安装插件 二、在 webpack 配置中,require 或 import 引入 三、配置 参考地址：https://v4.webpack.js.org/plugins/terser-webpack-plugin/ 一、安装terser-webpack-plugin 二、在 Webpack 配置中引入 三、配置

    2024年04月14日
    浏览(54)
  • 把matlab的m文件打包成单独的可执行文件

    把matlab的m文件打包成单独的可执行文件

    安装Matlab Compiler Adds-on 在app里找到Application Compiler 选择要打包的文件 matlab单独的运行程序的话需要把依赖的库做成runtime. 这里有两个选项. 上面那个是需要对方在联网的情况下安装, 安装包较小. 下面那个是直接把runtime打包成安装程序, 大概由你的程序依赖的库的多少决定. 打

    2024年02月11日
    浏览(45)
  • CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）

    CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）

    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表 （Cascading Style Sheets）。下面是一些常用的CSS3属性及其详细解释： border-radius：设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径，也可以只使用一个值来设置统一的圆角。 box-shadow：创建一个元

    2024年02月08日
    浏览(54)

  • 微信小程序 ，[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。

    导入全部图表的echarts.js非常大,如果你的项目较大可能会导致项目上传失败, 在你把整个echarts.js导入项目时开发者工具也会有如下提示: [JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js 我们可以通过图表在线定制来替换 echarts.js 文

    2024年02月13日
    浏览(45)

  • 【Webpack】CSS 处理

    Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好 我们应该是单独的 Css 文件，通过 link 标签加载性能才好 1. 下载包 2. 配置 webpack.prod.js 3. 运行指令 1. 下载包 2. 配置 webpack.prod.js 3. 控制兼

    2024年02月22日
    浏览(25)
  • Webpack打包arcgis js api 3.x纯html+JS+CSS项目

    Webpack打包arcgis js api 3.x纯html+JS+CSS项目

    小项目。纯HTML+JS+CSS已经部署上线，但是没有做混淆加密，需要进行混淆加密 目前代码里面需要混淆加密的有main.js，其他的不用混淆加密。所以只需要对main.js进行混淆加密就可，但是要保证混淆加密之后能够访问方法。 由于目前在index.html的script使用import导入main.js里面的方

    2024年02月11日
    浏览(62)
  • vue2项目打包压缩处理

    vue2项目打包压缩处理

    平常项目打包后，js等文件会体积大，这样用户访问会慢 webpack优化 – compression-webpack-plugin 开启gzip 1、安装compression-webpack-plugin 这里我项目webpack版本是3.6.0，所以得安装低版本得compression-webpack-plugin，webpack版本高于这个得安装其他版本，不然会报错 2、修改配置 1、在config/i

    2024年01月18日
    浏览(45)
  • Webpack打包ts文件

    Webpack打包ts文件

    安装依赖包： 配置webpack配置文件（webpack.config.js）： 还需要指定一个配置文件来指定我们ts的一个编译规范，在根目录创建一个tsconfig.json    

    2024年02月12日
    浏览(44)

  • Webpack打包简单的js文件

    初始化一个新的npm 步骤一： 初始化npm项目，创建一个package.json文件 步骤二： 添加打包脚本：在 scripts 部分添加一个命令来运行webpack 步骤三： 安装Webpack 步骤四： 创建一个简单的Javascript文件，比如 src/index.js 步骤五： 配置Webpack，创建一个名为 webpack.config.js 的文件 步骤六

    2024年01月24日
    浏览(36)

  • chatGPT问答 之 Webpack 5 多入口打包如何指定打包文件名为规定的文件名

    chatGPT越来越令人惊奇，有一些答案在百度上搜半天却找不到你想要的，但与chatGPT的聊天中就可以非常快的得到你想要的结果，不得不说人工智能很好用下面就是我与chatGPT的聊天内容 在Webpack 5中，可以使用 output.filename 选项来指定多入口打包后的文件名规则。 output.filename 可

    2024年02月02日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包