webpack5-打包样式文件css,less,scss

打包样式文件css

参考图

1.目录结构

2.新建目录下初始化项目

操作步骤

// 1. 新建文件 02_webpack_打包样式资源
// 2. 项目npm初始化(npm init)
// 3. 新建webpack.config.js
// 4. 新建其他文件

webpack.config.js

const path = require("path")

module.exports = {
    entry: './src/index.js', //入口
    output: {
        // __dirname: nodejs文件，当前目录的绝对路径
        path: path.resolve(__dirname, 'dist'), //输出路径
        filename: 'built.js', //输出文件名
    },
    module: {//loader配置
        rules: [
            //不同loader处理不同文件
            //1.处理css文件
            {
                test: /\.css$/i, //正则匹配文件
                use: [//使用哪些loader   
                    // use执行顺序，从右到左 从下向上 依次执行                
                    //创建style标签，将js样式资源插入，添加到head中
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，内容是样式字符串
                    'css-loader'
                ]
            },
            //2.处理less文件
            {
                test: /\.less$/i,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        //将less编译成css
                        loader: 'less-loader',
                    },
                ],
            },
            //3.处理scss文件
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    //将scss编译成css
                    'sass-loader',
                ],
            }
        ],
    },
    plugins: [//插件配置

    ],
    mode: 'development',//模式配置 development | production | none
}