webpack5零基础入门-4使用webpack处理less文件

1.安装less

npm install less -D

2.创建less文件

复制代码
.box{
    width: 100px;
    height: 100px;
    background: red;
}

3.引入less文件并打包

执行npx webpack

报错无法识别less文件

4.安装less-loader并配置

npm install less-loader@9 -D

这里指定一下版本不然会因为node版本过低报错

配置:

复制代码
const path = require('path');//nodejs用来处理路径问题的模块

module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        /**文件名 */
        filename: 'dist.js'
    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/, //只检测.css文件
                use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
            },
            {
                test: /\.less$/,//只检测.less文件
                //loader:'xxx',loader只能使用一个loader,use可以使用多个loader
                use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
            }
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
    ],
    /**模式 */
    mode: 'development'
}

注意要最先使用less-loader进行处理,

loader只能使用一个loader,use可以使用多个loader

less-loader 可以将less文件编译成css文件

执行npx webpa打包

查看html文件

相关推荐
谷歌开发者41 分钟前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强44 分钟前
Chrome和IE获取本机ip地址
前端
天***88961 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*1 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls1 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友1 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机3 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安3 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam4 小时前
Chrome性能优化秘籍
前端·chrome·性能优化