webpack中css-loader以及less-loader的使用

使用loader将css代码和less打包

1. 使用loader首先得下载所需要得loader

npm install style-loader css-loader less-loader -D

2. css以及less文件的打包(代码)

const {resolve} = require('path');

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [{
            // 匹配文件
            test: /\.css$/,
            // 使用哪些loader
            use: [
                // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                // 将css文件变成commonjs模块加载js中，里面的内容是样式字符串
                'css-loader'
            ]
        },
        {
            test : /\.less$/,
            use : [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    
    ]
    },
    // plugin
    plugins: [

    ],
    mode: 'development'
    // mode : 'production'
};