webpack css_webpack打包有哪些文件

webpack css_webpack打包有哪些文件css文件处理-准备工作(以下项目配置都是基于上一篇webpack(4)的基础上)在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。这里我们就在src目录中创建一个n

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

css文件处理-准备工作

(以下项目配置都是基于上一篇webpack(4)的基础上)
在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。

这里我们就在src目录中创建一个normal.css文件,代码如下:

body{
    background-color: aqua;
}

代码很简单,就是将body设置一个背景颜色,但是此时样式是不会生效的,因为我们根本没有引用它,所以我们需要在入口main.js中引入css

// 引用css文件
require('./css/normal.css')

 

安装loader并配置

准备工作处理完后,我们需要安装2个loader

  • style-loader 将模块导出的内容作为样式并添加到 DOM
  • css-loader 加载 CSS 文件并解析 importCSS 文件,最终返回 CSS 代码

安装命令如下:

npm install --save-dev style-loader css-loader

安装完成后我们还需要在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

注意:这里use列表中的2个loader顺序是不能互换的,因为loader 是从右到左(或从下到上)地取值(evaluate)/执行(execute)。所以上面的示例是先执行css-loader加载样式文件后,再执行style-loader
 

实践结果

最后我们使用npm run build就可以打包成功,然后访问index.html,页面呈现的颜色就是我们normal.css样式中设置的颜色

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/165386.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python中矩阵的转置_[转]Python中的矩阵转置[通俗易懂]

    python中矩阵的转置_[转]Python中的矩阵转置[通俗易懂]Python中的矩阵转置via需求:你需要转置一个二维数组,将行列互换.讨论:你需要确保该数组的行列数都是相同的.比如:arr=[[1,2,3],[4,5,6],[7,8,9],[10,11,12]]列表递推式提供了一个简便的矩阵转置的方法:print[[r[col]forrinarr]forcolinrange(len(arr[0]))][[1,4…

    2022年5月29日
    45
  • 程序员即装逼又实用的Cmd命令行

    程序员即装逼又实用的Cmd命令行首先windows键+R(+R)打开运行,输入cmd回车打开命令行。1、cleanmgr选择盘符清理垃圾,能加快电脑运行速度。2、chkdsk磁盘检查,能检查磁盘是否有损害。3、devmgmt打开设备管理器4、dxdiag打开DirectX诊断工具,买二手电脑是避免黑商修改电脑配5、ping:ping192.168.0.1判断某台电脑是否能连…

    2022年5月20日
    75
  • linux利用sendmail发送邮件的方法

    linux利用sendmail发送邮件的方法

    2021年10月7日
    38
  • 对AutoResetEvent和ManualResetEvent的理解

    对AutoResetEvent和ManualResetEvent的理解一、作用AutoResetEvent和ManualResetEvent可用于控制线程暂停或继续,拥有重要的三个方法:WaitOne、Set和Reset。这三个方法的官方定义并不好理解,什么终止、非终止,乱七八糟的。在这里,我们以一种通俗易懂的概念来说明。 二、比喻如果把每个线程比作一辆汽车的话,AutoResetEvent和ManualResetEvent就

    2022年7月18日
    16
  • 二级导航菜单[通俗易懂]

    二级导航菜单[通俗易懂]本文用html5+css实现了二级导航菜单,二级导航菜单在网站建设中使用的越来越广泛。效果图如下:当鼠标悬停在一级菜单上时,出现二级下拉菜单二级下拉菜单可以被选中,当鼠标悬停上去时,变色。html代码<!DOCTYPEhtml><html><head><metacharset="UTF-…

    2022年7月26日
    10
  • linux rwx 权限「建议收藏」

    linux rwx 权限「建议收藏」@linuxrwx权限欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown将代码片显示选择的高亮样

    2022年5月2日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号