开发者社区> 昆吾kw> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Webpack(3): 使用 loader 处理 CSS

简介: 上文讲解了 webpack 的简单配置和配置文件的使用,初步实现模块化的打包构建工作。本文将以在 webpack 中处理 css 样式文件为例,演示 loader 的使用。
+关注继续查看

前言

上文讲解了 webpack 的简单配置和配置文件的使用,初步实现模块化的打包构建工作。

本文将以在 webpack 中处理 css 样式文件为例,演示 loader 的使用

准备文件

准备样式文件:src/index.css

body {
  font-size: 40px;
  color: gold;
}

前文中说过,webpack 的世界,一切皆模块,每个文件就是一个模块。那么 css 文件也是一个模块,将其引入入口文件中,src/index.js:

import './index.css'

document.querySelector('body').innerHTML = 'Hello'

然后执行打包命令:

pnpm webpack

报错:

根据报错信息 “You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file”,意思是 需要配置一个合适的 loader 来处理 css 文件

Loader

什么是 loader

Webpack 基于 Node.js, 只“认识” JavaScriptJSON 文件。Loader,模块加载器,就是让 webpack 能够去识别其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

处理 css 文件,我们需要用到两个 loader:

  • css-loader:解析 css 文件,转译为 webpack 能识别的模块
  • style-loader:将 css 使用

安装 loader

pnpm add css-loader style-loader -D

配置 loader

安装好 loader 还需要进行配置,告诉 webpack 这个 loader 针对哪些类型的模块发挥作用。

配置文件中提供了一个 module.rules 配置项,可知该配置项是用来配置模块规则的,也就是用来配置 loader 的。

const path = require('path')
module.exports = {
  mode: 'development',

  entry: './src/index.js',

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  
  // module 用来配置处理模块
  module: {
    // rules 是一个数组, 每一项是针对某类模块的一种配置;可以有若干个配置
    rules: [
      // 规则有几个常用的属性
      { 
        // 通过正则表达式指定匹配的模块类型
        test: /\.css$/, 
        
        // 使用哪种 loader 进行处理
        // loader 的生效是有顺序的,从右到左,也就是先用 css-loader 处理 webpack 能识别的内容,再经 style-loader 将样式插入到页面中
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
}

打开命令行窗口,执行打包命令:

pnpm webpack

没有再报错,css 模块已经能被正确处理了。

浏览器打开 index.html:

image-20220806013333733

经过打包后的 css 样式被插入到 html 文件中了。

但是这种打包方式不是特别好,最好的方式是将 css 样式内容打包成单独的文件,再被 html 引入。这样有利于减少 html 文件的体积,能提高首次加载 html 文件的速度。同时,也能合理的利用静态资源文件缓存,和应用 CDN 方案。

要实现这个效果,需要 webpack plugin 的支持,我们放到后面讲 plugin 的时候再介绍。

小结

本文介绍了如何使用 webpack 处理 css 文件,其实就是利用 css-loader 和 style-loader。同时介绍了 loader 在 webpack 中发挥的作用,就是帮助 webpack 处理它不认识的模块类型。同时也讲解了 loader 的简单配置。

下篇文章,会介绍如何在 webpack 中处理 less 文件和 scss 文件。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
webpack:自定义loader
webpack:自定义loader
4 0
图解Webpack——实现一个Loader
图解Webpack——实现一个Loader
94 0
手把手教你撸一个 Webpack Loader
经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子,放进去一条丝巾,变出来一只白鸽。
1795 0
webpack window 安装loader
1.安装loadernpm install css-loader style-loader --save-dev 2.配置loader,在webpack.config.js中 module: { loaders: [ { test: /\.
627 0
+关注
昆吾kw
前端开发。
38
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载