【webpack5】loader处理样式资源

webpack本身只能处理js、json，不能处理样式资源；
处理样式资源——借助loader

webpack loader 官方文档

css-loader

npm install --save-dev css-loader

资源需要在main中引入，main作为入口
将写好的css引入如图

npx webpack

报错信息表明需要一个loader

下载css-loader
npm install --save-dev css-loader

    //加载器
    module:{
        rules:[
            //loader的配置
            {
                test: /\.css$/,//检测.css结尾的文件
                use: [ //use执行顺序：从右到左（从下到上）
                    'style-loader', //将js中的css通过创建style标签添加html文件中生效
                    'css-loader' //将css资源编译成common.js到js中
                ]
            }
        ]
    },

loader要对哪个文件生效，就要在test里写正则匹配文件

npx webpack 报错

webpack文档没有把需要下载的所有依赖都写出来

这里用到了style-loader，所以还需要下载style-loader
npm i style-loader -D

下载后编译成功

dist里依然没有css文件，这是因为css打包到js里面了
在浏览器里打开，可以看到动态创建style标签插入到页面上

其它样式与css大同小异，以下为less部分内容

less-loader

{
    test: /\.less$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "less-loader" // compiles Less to CSS
    }]
}

之前的文档用的是loader:"xxx"而不是use:“xxx”，二者区别是loader:"xxx"只能使用一个loader，而use可以使用多个loader；（同本文中css的use配置方法，现在改成use里写loader貌似更加严谨了…）

sass-loader

安装：
npm install sass-loader node-sass webpack --save-dev

node-sass 和 webpack 是 sass-loader 的 peerDependency，因此能够精确控制它们的版本。

配置：

 {
    test: /\.scss$/,
     use: [{
         loader: "style-loader" // 将 JS 字符串生成为 style 节点
     }, {
         loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
     }, {
         loader: "sass-loader" // 将 Sass 编译成 CSS
     }]
 }

stylus-loader

npm install stylus stylus-loader --save-dev
or
yarn add -D stylus stylus-loader
or
pnpm add -D stylus stylus-loader

 {
    test: /\.styl$/,
    use: [{
        loader: "style-loader" // 将 JS 字符串生成为 style 节点
    }, {
        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
    }, {
        loader: "stylus-loader" // 将 stylus 编译成 CSS
    }]
},