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

Z编程2024-03-12 8:24

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