webpack插件（一）

#webpack插件（一）| 来源: 网络整理| 查看: 265

webpack插件（一）-mini-css-extract-plugin 原创

假装睡觉Joker 2023-03-27 14:31:10 博主文章分类：webpack ©著作权

文章标签 css CSS 配置文件文章分类 Webpack 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者假装睡觉Joker的原创作品，如需转载，请与作者联系，否则将追究法律责任

webpack插件之查漏补缺-mini-css-extract-plugin

今天给大家介绍的webpack插件是mini-css-extract-plugin；

mini-css-extract-plugin

它的作用是将 CSS 代码从 JavaScript 中分离出来，生成单独的 CSS 文件。

使用 mini-css-extract-plugin 可以避免将 CSS 代码打包到 JavaScript 文件中，减少 JavaScript 的体积，同时也可以使得 CSS 文件可以被浏览器缓存，提高页面加载速度。

安装yarn add -D mini-css-extract-plugin配置

在 webpack 配置文件中引入 mini-css-extract-plugin：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

在 webpack 配置文件的 plugins 数组中添加 MiniCssExtractPlugin 的实例：

plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', }), ],

其中，filename 是生成的 CSS 文件名，[name] 会被替换为入口文件名，[contenthash] 会根据文件内容生成一个 hash 值，当文件内容无更改压缩后的css也是一样的。可用于版本管理。

在 webpack 配置文件的 module.rules 数组中添加处理 CSS 文件的规则：

module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ], }, ], },结果

打包后

webpack插件（一）-mini-css-extract-plugin_CSS

赞收藏评论分享举报

上一篇：webpack构建React、TSX项目（一）

【本文地址】

今日新闻