webpack如何实现自动检测less文件的生成并对其进行编译?

问题描述

问 题

用gulp实现了这个功能,但是不清楚如何以webpack来实现。
想过在入口文件在引入css文件时将文件名字以变量代替,但不知如何动态地检测产生的文件名来赋值给变量,并且最后用webpack进行整合。
拜求诸位大神赐教！

解决方案

webpack是基于组件化的*-loader,使用less-loader就可以实现对less的编译,给出配置：

var path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    //在打包的时候如果碰到了css后缀的文件就用css-loader组件加载(可以查看组件的详细介绍,比如压缩css选项)
    //在打包的时候如果碰到less后准的文件就用less-loader组件加载
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style!css'},
            {test: /\.less$/, loader: 'style!css!less'},
        ]
    }
}

这篇关于webpack如何实现自动检测less文件的生成并对其进行编译?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！