Webpack优化-提取CSS代码到单独的文件中

已于 2024-07-21 08:59:22 修改
阅读量63 收藏
点赞数 3
文章标签： webpack css 前端
于 2024-07-21 08:57:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140582564
版权

为什么要将css单独提取到文件中

Webpack 优化-提取 CSS 代码到一个单独的文件：因为 CSS 文件可以被浏览器缓存，减少 js 文件的体积。而且浏览器可以并行下载 js 文件和 css 文件，加快下载速度。

插件：mini-css-extract-plugin

插件说明

要提取CSS代码到单独的文件，需要插件mini-css-extract-plugin：
https://webpack.docschina.org/plugins/mini-css-extract-plugin/
在这里插入图片描述

注意：style-loader 和 mini-css-extract-plugin不要一起使用

https://github.com/webpack-contrib/css-loader#recommend
在这里插入图片描述

建议：mini-css-extract-plugin 与 css-loader 一起使用

https://webpack.docschina.org/plugins/mini-css-extract-plugin/
在这里插入图片描述

提取CSS代码到单独文件的步骤

1）下载 mini-css-extract-plugin 作为本地软件包
2）配置 webpack.config.js，让 Webpack 拥有该插件功能
3) 重新打包

示例

下载 mini-css-extract-plugin 作为本地软件包

在这里插入图片描述

安装完成后，package.json自动更新：
在这里插入图片描述

配置 webpack.config.js

在这里插入图片描述

在这里插入图片描述

重新打包

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

拉到文件的末尾，是自己写的index.css中的代码：
在这里插入图片描述

提取的css文件作用到了我们的html页面中：
在这里插入图片描述

听海边涛声
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack基础案例.webpack单独提取css,html
09-23
在这个"webpack基础案例.webpack单独提取css,html"中，我们将探讨如何使用Webpack配置来分别处理CSS和HTML文件，以便在项目构建过程中更好地管理和优化资源。 首先，我们要理解Webpack的基本工作流程。Webpack 通过...
前端开源库-webpack-handle-css-loader
08-30
3. **CSS提取**：在生产环境中，为了提高页面的加载速度，通常会使用`MiniCssExtractPlugin`将CSS抽取到单独的文件中，而不是将其内联到JavaScript中。`webpack-handle-css-loader`可能包含了对这个插件的支持。 4....
webpack4--提取css到单独文件并且压缩css
Jq的博客
10-15 8788
提取css到build/css目录下：mini-css-extract-plugin插件 压缩css:optimize-css-assets-webpack-plugin’插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css到单独文件的插件 const OptimizeCssAssetsPlugin =...
webpack-提取css单独文件和css兼容性
qq_41309350的博客
01-25 99
提取css单独文件 下载插件 npm install --save-dev mini-css-extract-plugin 配置文件:webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { resolve }=require('path') module.exports={
webpack-性能优化-提取css
m0_74019046的博客
06-06 348
Content Delivery Network 或 Content Distribution Network 的缩写一般把静态资源或第三方资源放到CDN上。可以在 output的publicPath配置cdn的地址，打包后所有的脚本的前缀都变为这个cdn地址了,一般不会这样使用设置externals排除需要打包的包(使用的较多)需要在index.html引入对用的js脚本。
webpack5零基础入门-14提取css为单独文件
weixin_45636198的博客
05-15 382
Css文件目前被打包到JS文件中，当JS文件加载时，会尝试创建一个style标签来生成样式，这样对于网站来说，会出现闪屏的现象，用户体验不好。我们应该是单独的Css文件，通过link标签来加载性能才好。
详解webpack打包vue时提取css
08-30
保存配置后，运行 Webpack 构建命令，如 `npm run build`，此时，Vue 项目中的 CSS 将被提取到单独的 CSS 文件中。 通过以上步骤，你已经成功地配置了 Webpack 以在打包 Vue 项目时提取 CSS。这样不仅可以优化页面...
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
08-28
在本篇文章中，我们将介绍使用webpack的CommonsChunkPlugin插件来提取公共代码的3种方式。 什么是CommonsChunkPlugin？ CommonsChunkPlugin是webpack的一个插件，负责将多次被使用的JS模块打包在一起。它可以解决...
Webpack插件用于将SVG加载提取到sprite文件中
08-07
这个插件的工作原理是读取项目中的SVG文件，将它们合并到一个SVG sprite文件中，并生成相应的CSS或JS模块，以便在代码中引用这些图标。 使用这个插件，你可以按照以下步骤操作： 1. 安装插件：在你的项目中，通过...
webpack生产环境下的配置
web
07-16 415
在入口文件(src/index.js)引入@babel/polyfill。在入口文件引入 @babel/polyfill。根配置，配置eslint标准。方案2和方案三选一种即可。
webpack优化
web
07-16 508
**
【Vite】快速入门及其配置
小秀的博客
07-20 146
Vite也是前端的构建工具。vite开发时，并不对代码打包，而是直接采用ESM的方式来运行项目在项目部署时，在对项目进行打包除了速度外，vite使用起来也更加方便默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。
webpack和vite
2301_80339466的博客
07-17 838
本质上，是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。【按需打包】webpack在node中运行。
Vue3+Vite+TS+Axios整合详细教程
majingbobo的博客
07-14 1139
Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR.
【Webpack】HMR 热更新
小秀的博客
07-20 94
不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。
【webpack开发环境下的配置】
web
07-16 425
/ 开发服务器， devServer: 自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）// 启动devServer指令为：npx webpack-dev-server。// 特点：只会在内存中编译打包，不会有任何输出。其他资源: 指不需要处理的资源如字体图标。以上两个命令都可以，任选一个就行。
vue 环境变量那些事
weixin_42028153的博客
07-10 566
env.production 代表的生产环境变量也就是上线以后使用的。.env.development 代表的开发环境变量。取：import.meta.env.VITE_变量名。取：process.env.VUE_APP_变量名。总则：使用 .env.环境名字文件去定义，运行命令的时候指定环境。vite+vue3项目（默认VITE开头，其他开头的需要配置）存：VUE_APP_变量名 = xxx。比如：.env 代表所有环境变量使用的一些变量。vue-cli项目（webpack+vue2）
【Webpack】提高打包速度
最新发布
小秀的博客
07-20 219
启⽤ Tree Shaking：使⽤ES6的import和export语句以及Webpack的tree shaking功能可以排除未使用的代码，减少打包后的⽂件⼤⼩，从⽽提⾼构建速度和性能。使⽤LoaderOptionsPlugin插件：该插件可以将Loader的选项提取到Webpack的配置中，避免在每个Loader中重复设置相同的选项，从⽽提⾼构建速度。使⽤多个entry和output：使⽤多个entry和output可以将不同的代码分别打包成多个⽂件，从⽽减少每个⽂件的⼤⼩，提⾼构建速度和性能。
webpack将css文件打包到css目录下
06-06
要将CSS文件打包到css目录下，可以在webpack配置文件中进行如下配置： ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { // ...其他配置 module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' // 解决css中引入的图片路径不正确的问题 } }, 'css-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[chunkhash].css' }) ] } ``` 其中，module.rules配置用于指定如何处理各种类型的文件，plugins配置用于指定插件。这里使用了MiniCssExtractPlugin（需要先安装），它的作用是将CSS文件单独打包到指定的目录下，而不是将CSS代码打包到JS文件中。 在module.rules中配置了针对CSS文件的处理规则，其中使用了css-loader和MiniCssExtractPlugin.loader。css-loader用于解析CSS文件中的@import和url()等语法，并将其转换为Webpack可以理解的语法。MiniCssExtractPlugin.loader用于将CSS代码从JS文件中提取出来并打包到指定目录下，同时也可以处理CSS中引入的图片路径不正确的问题。 在plugins中配置了MiniCssExtractPlugin插件，用于指定打包生成的CSS文件输出目录和文件名。这里将打包生成的所有CSS文件都放在了css目录下，文件名格式为css/[name].[chunkhash].css，其中name表示文件名，chunkhash表示文件的hash值。这样每次打包生成的文件名都不同，有助于缓存更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值