webpack5的loader配置小白学习篇

 更新时间:2023年05月26日 11:28:36   作者:smallStone  
这篇文章主要为大家介绍了webpack5的loader配置非常适合webpack入门的小白学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

loader 用于各类资源的处理

loader用于处理其他类型资源;什么是其他类型?就是各个类型都行,例如:css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg...你能想到的所有资源都可以通过此属性来处理,包括路径处理,文件处理,不支持的语言解析都可以通过这个处理。

这里我列6个:

babel-loader

ts-loader

css-loader

sass-loader

style-loader

MiniCssExtractPlugin.loader

以上这些都是关于js和css处理的loader。关于图片、字体等其他静态资源文件,我再以后的文章中会给大家介绍到。

js和css相关的loader

// webpack.config.js
...
module: {
    rules: [
        {
            test: /\.css$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'css-loader', // 当只有一个的时候就用这个
            use: ['style-loader','css-loader',] // 当有多个的时候就用这个,执行顺序是从右向左
        },
        {
            test: /\.scss$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'css-loader', // 当只有一个的时候就用这个
            use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 执行顺序是从右向左
        },
        {
            test: /\.styl$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'stylus-loader', // 当只有一个的时候就用这个
            use: [{
                loader: 'postcss-loader', // 如果loader带有参数,则使用此方式
                option: {
                    name: 'stylus'
                },
            },'css-loader', 'stylus-loader'] // 执行顺序是从右向左
        }
    ]
}
...

需要注意的是:此前我就已经说过css-loader是只吧css文件打包成模块。并未引用到html文件。因此需要引入到html文件,则需要在css-loader处理后在执行style-loader把处理后的css插入到html页面内使用(既生成一个style标签插入)。

sass-loader的使用前需要安装sass/node-sass

MiniCssExtractPlugin.loader其实也是个plugin,它可以把样式文件拎出来。变成一个css文件。既代码分割,样式分割。

// webpack.config.js
...
module: {},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].min.css', // css名称
        chunkFileName: '[name].chunk_[id].css' // 异步引入的css名称
    })
]
...

这个chunk之前解释过这里再加强一下。chunkFileName就是异步引入的css文件。例如:按需加载的css。则就会走chunkFileName配置的名称。

以上就是webpack5的loader配置小白学习篇的详细内容,后续再讲plugin属性,此属性是最强,更多关于webpack5 loader配置的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript中从setTimeout与setInterval到AJAX异步

    JavaScript中从setTimeout与setInterval到AJAX异步

    这篇文章主要介绍了JavaScript中从setTimeout与setInterval到AJAX异步,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • JavaScript闭包和范围实例详解

    JavaScript闭包和范围实例详解

    这篇文章主要介绍了JavaScript闭包和范围,结合实例形式详细分析了javascript闭包的使用及变量的作用范围,需要的朋友可以参考下
    2016-12-12
  • webpack 静态资源集中输出的方法示例

    webpack 静态资源集中输出的方法示例

    这篇文章主要介绍了webpack 静态资源集中输出的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JS实现黑色风格的网页TAB选项卡效果代码

    JS实现黑色风格的网页TAB选项卡效果代码

    这篇文章主要介绍了JS实现黑色风格的网页TAB选项卡效果代码,通过简单的页面元素遍历控制页面tab切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • javascript 弹出层组件(升级版)

    javascript 弹出层组件(升级版)

    前面文章里写过一个弹出层对话框,但ie6下有bug,根本没有实现position:fixed的效果,当时没有真实ie6环境,测试疏忽,匆匆放到博客上,还让一些读者看到甚至使用,在这里表示万分抱歉啊
    2011-05-05
  • 基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

    基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

    但是由于浏览器的兼容性问题,之前用的很多代码都失去效果,下面就给出一段能够兼容各个浏览器的代码,也不能够算是兼容,只能说在不支持的浏览器中能够给出提示,对js兼容各个浏览器设为首页加入收藏相关知识感兴趣的朋友可以参考下本文
    2016-01-01
  • JavaScript前端中的伪类元素before和after使用详解

    JavaScript前端中的伪类元素before和after使用详解

    before和after也算是css里面最常见的元素了,而我却一直不太了解,再不学一下就真的太不像话了。所以学习一下,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • 一文总结JS中逻辑运算符的特点

    一文总结JS中逻辑运算符的特点

    在JavaScript的众多运算符里,提供了三个逻辑运算符&&、||和!,下面这篇文章主要给大家介绍了关于JS中逻辑运算符的特点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 老生常谈js中0到底是 true 还是 false

    老生常谈js中0到底是 true 还是 false

    下面小编就为大家带来一篇老生常谈js中0到底是 true 还是 false。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JavaScript中EventLoop介绍

    JavaScript中EventLoop介绍

    本篇文章给大家详细介绍了JavaScript中EventLoop的相关知识,有这方面需要的朋友参考学习下。
    2018-01-01

最新评论