五、（二）webpack配置less、scss、stylus

官网写的还是比较详细：webpack-loaders
首先，新建的webpack项目应当支持了css模块引入和挂载到页面的能力
只需要安装css-loader和style-loader这两个功能

const path = require('path')
module.exports = {
    entry: './src/min.js',   //入口
    output: {
        path: path.resolve(__dirname, 'dist'),//动态获取路径
        filename: 'bundle.js'
    },   //出口
    module: {   //配置loader
        rules: [    //规则
            {
                test: /\.css$/, 
                // webpack的读取顺序，从右向左依次执行
                // css-loader只负责将css文件进行加载
                // style-loader则负责将样式进行挂载到DOM元素上
                use: ['style-loader','css-loader']
            }
        ]
    }
}

使用less文件

npm install --save-dev less-loader less

const path = require('path')
module.exports = {
    entry: './src/min.js',   //入口
    output: {
        path: path.resolve(__dirname, 'dist'),//动态获取路径
        filename: 'bundle.js'
    },   //出口
    module: {   //配置loader
        rules: [    //规则
            {
                test: /\.css$/, 
                // webpack的读取顺序，从右向左依次执行
                // css-loader只负责将css文件进行加载
                // style-loader则负责将样式进行挂载到DOM元素上
                use: ['style-loader','css-loader']
            },
            // 官网的直接复制粘贴		就比上面的代码多了这点东西
            {
                test: /\.less$/,	//正则匹配less文件
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings  3.在将css挂载到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS  2.在将css模块引入
                }, {
                    loader: "less-loader" // compiles Less to CSS  1.先将less转css
                }]
            }
        ]
    }
}