webpack 基础理解[二]之常用loader & plugin

迷南。 2023-01-18 04:14 140阅读 0赞

> 业精于勤 荒于嬉

***webpack 中 常用的 loader***

***css 模块化：关键 modules:true***

rules: [{
                    test: /\.css$/,
                    //     loader: 'css-loader'
                    //     // loader 的执行顺序是从后向前面
                    //     //  webpack 遇到自己不认识的文件时 ，先去module找 ，定义的规则里面有没有对应的loader
                    //     // css-loader 言简意赅 是把css 模块内容加入到 js 模块中区
                    //     // style-loader 从js 中提取css 的 loader ,在html 中创建style 标签 
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.less$/,
                    use: ['style-loader', {
                        loader: 'css-loader',
                        options: {
                            // 开启 css 模块化
                            // css modules 
                            modules: true
                        }
                    }, 'less-loader'], // 将 Less 文件编译为 CSS 文件
                },
            ]

import css from './css/index.less'
    console.log('index xixi')
    
    let ele = `<div class="${css.ele}"> css module</div>`
    document.write(ele)

***file-loader：解析图片 可以设置打包后的图片名称 以及输出路径***

{
                    test: /\.(png|jpe?g|jpeg|gif)$/, // 问号代表可有可无 ？可以同时匹配jpg 和 jpeg
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: "[name]_[hash:6].[ext]",
                            outputPath: 'images/'
                        }
                    }
                }

***postcss-loader ,autoprefixer ,先安装 再使用***

const autoprefixer = require('autoprefixer')
    module.exports = {
        plugins: [
            // require('autoprefixer')
            autoprefixer(
                // postcss 处理使用autoprefix 添加前缀的标准
                {
                    //last 2 versions 最新的两个版本
                    // 全球浏览器市场份额大于 1%
                    overrideBrowserslist: ["last 2 versions", ">1%"]
                }
            )
        ]
    }

***file-loader 使用***

引入三方字体的使用也需要用到 file-loader

url-loader 和 file-loader 是包含关系，安装了 file-loader ，直接使用url-loader 是可以的

url-loader把资源文件转换为URL，file-loader也是一样的功能。

不同之处在于url-loader更加灵活，它可以把小文件转换为base64格式的URL，从而减少网络请求次数。url-loader依赖file-loader。

在大多数情况下，使用url-loader准没错。

*匆匆忙忙记录一下 ，迎接五一假期了。。。*

> *积跬步 至千里*

![20210430174533262.jpg][]

[20210430174533262.jpg]: /images/20221021/2553866ef3994ed7895191b5ce9ff13a.png