• 使用style-loader和css-loader处理css文件


    webpack本质上只能处理.js文件,也就是它是用来处理.js代码的,它不能直接处理外部样式

    所以我们就需要间接去处理,就需要用到第三方的loader加载器(处理器)

    处理.css文件需要一套加载器  style-loader,css-loader

    安装步骤:

    首先,Ctrl+c,终止批操作处理

     然后在终端输入安装命令: npm i style-loader css-loader -D

    安装完后    需要在webpack中配置添加配置节,配置loader的规则

    先写module,是一个对象,{}表示,它是专门用于配置所有的第三方模块的loader加载器

    在module写一个rules的节点,是一个数组,这里是设置第三方加载器的匹配规则

    在里面写一个对象,test的值用正则表达式来写,(注意,. 是元字符,需要转义,$表示以前面写的一串为结尾)

    use ,test都是规定好的,不能随意更改。

    use后面可以跟一个字符串,也可以跟一个数组。如果指定的加载器有一个,就直接将加载器的名字写在后面就可以了,如果十多个对象就用数组的形式写。

    (如果是数组,顺序需要注意一下,加载器运行时有一定的规则(加载器的运行规则是先来module下面找rules节点,找到以后就说明我们设置了第三方加载器的匹配规则,设置了匹配规则之后,我们就在匹配规则里面遍历数组,遍历的时候,如果遍历的这一个成员正好匹配上我们要处理的文件,这个时候就把use后面的拿出来,来看这里面告诉我们要用什么样的加载器来处理这种类型的文件,它在处理的时候,选择加载器是由后往前选择的。也就是说,在当前这样一个规则下,我如果要处理.css文件,是首先拿css-loader去处理,处理完的结果再交给style-loader再处理,它要经过两次处理,这就是它的工作原理)

     配置完成,再来运行就可以了。

  • 相关阅读:
    【读书笔记】构建之法(CH4~CH6)
    【进度总结】第一个web应用程序(未完成)
    【读书笔记】构建之法(CH1~CH3)
    【进度总结】软件工程选题报告
    Intro Of Myself
    【读书笔记】人月神话
    .net知识系列之二:(net内置对象request,reponse,server,session,cookie,application,viewstate)
    .net知识系列之一:(XHTML语言,静态网页,动态网页,web服务器)
    Java—常量和变量
    Java入门
  • 原文地址:https://www.cnblogs.com/mmit/p/12750390.html
Copyright © 2020-2023  润新知