webpack学习笔记(二)loader--css的打包和注入html

本文介绍如何使用Webpack配置loader来处理CSS、LESS和SASS文件,实现样式代码的转换和注入,包括安装必要依赖、配置文件说明及代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

loader用于对模块的源代码进行转换,在import或加载其他模块前可以使用loader进行预处理,比如可以把typescript转换成JavaScript,通过这样也允许了在JavaScript中引入css和less/sass文件。

以在JavaScript中importcss文件为例,首先要引入两个npm包:style-loader和css-loader

style-loader用于将处理好的css代码注入到html文件中的style标签

css-loader用于在import css文件前进行预处理

npm i style-loader css-loader -s

首先在根目录创建dist文件夹,src文件夹和webpack.config.js文件

在src下创建style文件夹存放css文件,编写css文件如下

div {
    width: 100px;
    height: 100px;
    background-color: black;
}

在src根目录下创建index.js文件并import css文件,创建一个dom并插入到页面中

import './style/index.css';

document.body.appendChild(document.createElement('div'));

编写webpack.config.js文件

const path = require('path');

module.exports = {
    entry: "./src/index.js", // 设置要打包的文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            // 配置所有css文件
            test: /\.css$/,
            // 从右往左引用,先使用css-loader处理后再使用style-loader将css代码注入到html文件中
            use: ['style-loader', 'css-loader']
        }]
    }
}

在dist文件夹下创建html文件,导入打包生成的main.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

在页面中打开该文件,检查代码,发现css代码已经注入到style标签中

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        </style>
    </head>

    <body>
        <script src="main.js"></script>
        <div></div>
    </body>
</html>

less/sass和css的处理相似,在module.rules中的use后加多一个less-loader/sass-loader进行处理即可,webpack-config.js修改如下

const path = require('path');

module.exports = {
    entry: "./src/index.js", // 设置要打包的文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值