《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背景颜色：

html,body{
    background-color: aqua;
}

less和sass 分别设置了颜色：

#less-title{
    color: bisque;
}

#scss-title{
    color: yellowgreen;
}

index.js文件引用：

import './style.css'
import './style.less'
import './style.scss'

webpack配置

具体说明看备注

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文件：

<!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>

验证展示：