webpack4 系列教程(五): 处理CSS

最新推荐文章于 2022-02-17 20:51:52 发布
最新推荐文章于 2022-02-17 20:51:52 发布
阅读量768 收藏
点赞数
分类专栏： webpack 系列教程 文章标签： javascript webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AsuraDong/article/details/82153134
版权
本文是webpack4系列教程的第五部分，主要讲解如何处理CSS。内容包括通过link标签和style标签引入CSS，动态卸载和加载CSS，以及在页面加载前对CSS的处理。使用了MiniCssExtractPlugin和style-loader等工具，通过实例演示了各种操作。
摘要由CSDN通过智能技术生成

这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。

>>> 本节课源码

>>> 所有课程源码

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | GitHub

1. 准备工作

众所周知，CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种，所以这次就是结合webpack特点实现以下功能：

  1. 将 css 通过 link 标签引入
  2. 将 css 放在 style 标签里
  3. 动态卸载和加载 css
  4. 页面加载 css 前的transform

下图展示了这次的目录代码结构：
目录结构

这次我们需要用到css-loader，file-loader等 LOADER，package.json如下：

{
   
  "devDependencies": {
   
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0"
  }
}

其中，base.css代码如下：

*,
body {
   
  margin: 0;
  padding: 0;
}
html {
   
  background: red;
}

index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document
最低0.47元/天 解锁文章
心谭
关注
专栏目录
webpack 4之css文件单独打包以及压缩
H_xiang_xiang的博客
06-21 300
我使用的webpack版本是 “webpack”: “^5.38.1”,，webpack 4之后有很多东西用法发生了变化，在此简单记录使用中出现过的问题。 用 style-loader 使用 style 标签将样式插入到页面中 以下两部分一般同时用 抽离css文件 为了把css样式拎出来作为一个.css文件 npm install -D mini-css-extract-plugin const MiniCssExtractPlugin = require('mini-css-extract-pl
webpack4 处理css文件
HQ DevJ的专栏
05-20 250
webpack4 处理css文件webpack4处理css安装mini-css-extract-plugin在webpack4中的使用 webpack4处理css 在早期的webpack的版本中，是使用extract-text-webpack-plugin这个插件。插件安装： npm install --save-dev extract-text-webpack-plugin 本人使用webpack4，查询相关插件的时候，官当推荐将extract-text-webpack-plugin替换成mini-css
Webpack 4教程 - 第六部分 增强开发时体验
03-15 128
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://wanago.io/2018/08/06/webpack-4-course-part-six-increasing-development-experience 今天我们将介绍mode属性的development值。它会自动为你配置Webpack以简化开发过...
webpack4 html 引入css,webpack4配置(3)-打包css/js/图片等资源
weixin_29314405的博客
06-18 165
打包css资源使用loaderwebpack可以使用各种不同loader来预处理不同格式的资源。在项目目录下添加文件：编写测试代码// src/index.htmlPage Title复制代码// src/css/style.css.box{width:50px;height: 50px;background-color: pink;}复制代码安装css-loader和style-loadercs...
webpack4 系列教程(九): CSS Tree Shaking
GodBMW的博客
09-02 693
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步: 原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示)： &amp;gt;&amp;gt;&amp;gt; 本节课源码 &amp;gt;&amp;gt;&amp;gt; 所有课程源码 1. CSS 也有 Tree Shaking？ 是滴，随着 webpack 的兴起，css 也可以进行 Tre...
webpack-core-usage：webpack2完整系列课程，欢迎阅读。同时欢迎移步我的React全家桶文章全集：https：github.comliangklfanglreact-article-bucket
01-31
在Webpack 2版本中，引入了许多增强功能和优化，使得它在处理复杂项目时更加高效。本篇文章将深入探讨Webpack 2的核心使用方法，包括其基本概念、配置、插件、加载器以及一些高级特性。 1. **模块化**：Webpack 将...
webpack系列之：手把手教你 打包和使用js文件
最新发布
11-16
本教程将详细解释如何使用Webpack来打包和使用JavaScript文件，以便在实际项目中高效管理代码。 首先，让我们了解Webpack的基本概念： 1. **入口（Entry）**：Webpack的起点，它告诉Webpack从哪个文件开始构建模块...
travel-site:使用HTML CSS Javascript，Gulp NPM Babel Webpack制作的教程单页移动优先网站
05-12
本教程将深入探讨如何使用一系列现代前端技术，包括HTML、CSS、JavaScript，以及自动化工具Gulp、包管理器NPM、转译器Babel和模块打包器Webpack，来创建一个以移动设备为中心的旅游地点单页网站。 首先，HTML...
使用Webpack处理CSS文件
maxandcc的博客
07-27 449
同前几篇文章一样，首先需要在自己的项目目录下初始化自己的npm（命令：npm init），然后下载依赖的包(npm install webpack webpack-cli) 初始化完成后，创建配置文件（webpack.config.js），轻车熟路了哈 好了，让我们run以下试试： 这时候可以看到报错了，说的是您需要一个loader处理该类型文件，这时候就联想到之前说的：loader是处理非js文件的。所以我们需要下载loader的包。这里需要下载css-loader（n...
webpack4 提取和压缩css文件
业余前端的职业经历
01-19 1000
1.如果你是用的 extract-text-webpack-plugin 插件进行提取的话 很不幸 在webpack4中他已经不支持 要想运行成功的话 有俩种方法 1.1 npm install extract-text-webpack-plugin@next 安装最新的beta版本 1.2 你也可以把你的webpack版本降低到3.* 版本 2.如果你的webpa...
webpack4 从js文件中提取和压缩css文件
业余前端的职业经历
08-17 471
1.如果你是用的 extract-text-webpack-plugin 插件进行提取的话 很不幸 在webpack4中他已经不支持 要想运行成功的话 有俩种方法 1.1 npm install extract-text-webpack-plugin@next 安装最新的beta版本 1.2 你也可以把你的webpack版本降低到3.* 版本 2.如果你的webpack是4版本 不想 改变的话 就接着往下看 在4版本中采用了 mini-css-extract-plugin // 插件进行提取c
webpack4：提取、压缩css(公共部分)、消除多余css
飞翔的熊blabla
02-09 1207
css提取 （mini-css-extract-plugin） 1、安装 npm i mini-css-extract-plugin -D // 或 npm i extract-text-webpack-plugin@next -D 2、webpack配置文件引入及配置： const MiniCssExtractPlugin=require('mini-css-extract-plugin') // const ExtractTextWebpackPlugin=re
前端学习（85）：display:none和visibility hidden
歌谣的博客
12-12 224
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
4、webpack提取css成单独文件
BWater_monster的博客
02-17 2694
webpack提取css成单独文件
webpack 分离css html,初探webpack4--提取分离CSS单独打包
weixin_26643379的博客
06-20 171
1、webPack提取分离CSS单独打包(ExtractTextPlugin、mini-css-extract-plugin)处理效果:将所有的入口chunk(entry chunks)中引用的CSS,移动到独立分离的CSS文件ExtractTextPlugin插件安装(下载)npm install --save-dev extract-text-webpack-plugin@next配置conf...
webpack学习（五）：webpack4+压缩和提取CSS以及提取公共部分
小五的博客
12-20 8190
提取：mini-css-extract-plugin what？ 在过去，如何将 CSS 提取到一个文件中这是 extract-text-webpack-plugin 的工作。不幸的是这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法：extract-text-webpack-plugin 的维护已经成为了一个很大的负担，这已经不是第一次因为它的问题，而使升...
webpack4学习总结一
A secret makes a woman woman.
04-17 1177
bundle assets /images /script /style   打包静态资源、图片、脚本文件、样式文件webpack是现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。v...
webpack4初学者指南：从零开始搭建项目
"这篇教程介绍了如何入门webpack 4，它是一个流行的前端资源模块化管理和打包工具，能够将多个模块按照依赖关系打包成符合生产环境的前端资源。与Grunt和Gulp不同，webpack采取模块化的处理方式，可以进行代码分割，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值