Webpack学习笔记（二）——处理样式（CSS）和图片资源

最新推荐文章于 2024-07-18 12:59:05 发布

黑白自明

最新推荐文章于 2024-07-18 12:59:05 发布

阅读量170

点赞数

文章标签： webpack 学习 css

本文链接：https://blog.csdn.net/weixin_46037227/article/details/126557120

版权

处理样式（CSS）资源

Css

下载包

npm i css loader -D

npm i style-loader -D

配置

test: /\.css$/, //只检测.css文件

    use: [

     //执行顺序从右到左（从下到上）

     "style-loader",//将js中的css通过创建style标签添加到html中生效

     "css-loader",//将css资源编译成commonjs的模块到js中

    ],

less

下载包

npm i less less-loader -D

功能

将less资源转化成css

配置

test: /\.less$/, //只检测.less文件

    //loader:  这个属性代表只能使用一个loader，下面的use可以使用多个

    use: [

     //执行顺序从右到左（从下到上）

     "style-loader", //将js中的css通过创建style标签添加到html中生效

     "css-loader", //将css资源编译成commonjs的模块到js中

     "less-loader",//将less资源编译成css

    ],

sass

下载包

npm install sass-loader node-sass webpack --save-dev

配置

test: /\.s[ac]ss$/, //只检测.sass或scss文件

    use: [

     "style-loader",

     "css-loader", 

     "sass-loader",//将sass资源编译成css

    ],

stylus

下载包

npm i stylus-loader -D
npm i stylus -D

配置

test: /\.styl$/, //只检测.sass或scss文件

    use: [

     "style-loader",

     "css-loader",

     "stylus-loader", //将stylus资源编译成css

    ],

处理图片资源

不用下载包，webpack自带了

配置

test:/\.(png|jpe?g|gif|webp)$/,

    type:"asset",

    parser: {

     dataUrlCondition: {

      //小于10kb的图片转base64

      //优点：减少请求数量 缺点：体积更大

      maxSize: 200* 1024,

     }

    }