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

业精于勤 荒于嬉

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 使用

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

 

引入三方字体的使用也需要用到 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准没错。

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

积跬步 至千里