前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《webpack5 实战二》之css打包

《webpack5 实战二》之css打包

作者头像
星宇大前端
发布2021-04-12 17:23:54
1K0
发布2021-04-12 17:23:54
举报
文章被收录于专栏:大宇笔记

前言:项目一直在用webpack 打包,也系统的跟着B站的视频教程去学过,但是总是觉得差了点什么,有些配置还是不知道,决定把一些例子写下来总结下知识点,顺便学习下webpack5。

webpack默认只支持打包json和js,打包css需要使用loader进行处理。

目标过程分解


目标:打包css、less、sass等样式资源

步骤:

  • 创建js、样式和webpack配置文件
  • webpack 配置文件添加处理样式的loader
  • 打包到html验证

代码实现


整体目录:

在这里插入图片描述
在这里插入图片描述

创建基础文件

默认全局包安装webpack 和 webpack-cli

分别创建css/less/scss 样式文件,

css设置body背景颜色:

代码语言:javascript
复制
html,body{
    background-color: aqua;
}

less和sass 分别设置了颜色:

代码语言:javascript
复制
#less-title{
    color: bisque;
}
代码语言:javascript
复制
#scss-title{
    color: yellowgreen;
}

index.js文件引用:

代码语言:javascript
复制
import './style.css'
import './style.less'
import './style.scss'

webpack配置

具体说明看备注

代码语言:javascript
复制
const { resolve } = require('path')

module.exports = {
    //webpack 配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'app.js',
        //输出路径
        path:resolve(__dirname,'dist')
    },
    //loader 配置
    module:{
        rules:[
            //详细loader配置
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader处理
                use:[
                    //use数组中loader执行顺序:从右到左从后到上
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
            //less loader
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //scss loader
            {
                test:/\.scss$|\.sass$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    //模式
    mode:'development'
}

注意点:loader 匹配文件,use loader 顺序是从后往前执行,注意顺序问题。

安装所需要loader 和 样式

安装列表:

  • less
  • less-loader
  • sass
  • sass-loader
  • style-loader
  • css-loader

打包到html验证

  • 到项目目录里,执行webpack指令 默认找到webpack.config.js 配置去打包。
  • 将打包过后的app.js文件引入html验证

html文件:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/app.js" ></script>
    <h1 id="less-title">less</h1>
    <h1 id="scss-title">sass</h1>
</body>
</html>

验证展示:

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/04/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目标过程分解
  • 代码实现
    • 整体目录:
      • 创建基础文件
        • webpack配置
          • 安装所需要loader 和 样式
            • 打包到html验证
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档