webpack5样式css，less，sass，styus（三）-CSDN博客

本文链接：https://blog.csdn.net/weixin_42038290/article/details/110555926

常用的样式资源主要是css、less、sass、styus
1、处理css文件用到的loader主要是style-loader、css-loader
2、处理less文件用到的loader主要是style-loader、css-loader、less-loader （需要安装less）
3、处理sass文件用到的loader主要是style-loader、css-loader、sass-loader （需要安装sass）
4、处理styus文件用到的loader主要是style-loader、css-loader、styus-loader （需要安装styus）
为了使每次打包后删除原来的文件重新生成新的文件，需要用到clean-webpack-plugin插件
相关配置

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: "./src/index.js",
    output:{
        filename:'bundle.js',//打包后的文件(如果想加让打包出来的文件都不一样，可以加hash，bundle.[hash].js)
        path:path.resolve(__dirname,'dist')//路径必须是绝对路径
    },
    mode:'development'
    module:{
			//css-loader简析@import require 这种语法，整合到js文件中
            //style-loader 创建style标签，放到样式中
            //loader的执行顺序默认从右到左，多个loader用[],字符串只用一个loader，也可以是对象的格式
        rules:[
            {
                test: /\.css$/,
   				use: [ 
                 {
                     loader: 'style-loader',
                     options: { //注意，此处使用insert，不能使用insertAt，否则会报错
                    	insert: 'top'//Style-loader 将 <style> 元素附加到样式目标(style target)的末尾，即页面的 <head> 标签，。这将导致 loader 创建的 CSS 优先于目标中已经存在的 CSS。
                    }
                },'css-loader'] 
            },
            {
                test: /\.less$/,
                use:["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.scss$/,
                use:["style-loader", "css-loader", "sass-loader" ]
            },
            {
                test: /\.stylus$/,
                use:["style-loader","css-loader", "stylus-loader"]
            }
        ]
    },
    plugins:[
 　　　　new CleanWebpackPlugin(),
    ]
}