loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript） Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

1、CSS文件的处理

官网：webpack.docschina.org/loaders/css…

yarn add css-loader style-loader -D

module: {
    rules: [
        // 实际处理顺序：从右往左
        // css-loader 让 webpack 能够识别解析 CSS 文件
        // style-loader 通过动态的创建style标签的形式(js)，让解析后的css内容，能够作用到页面中
        // 配置 css 文件的解析
        {
            // 正则：匹配所有以 .css 结尾的文件
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] // 先使用 css-loader 再使用 style-loader
        },
    ]
},

2. less 文件解析

官网：webpack.docschina.org/loaders/les…

yarn add less less-loader -D

module: {
    rules: [
        // ...
        // 实际处理顺序：从右往左
        // css-loader 让 webpack 能够识别解析 CSS 文件
        // style-loader 通过动态的创建style标签的形式(js)，让解析后的css内容，能够作用到页面中
        // 配置 less 文件的解析
        {
            test: /\.less$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },
                'css-loader',
                'less-loader'
            ]
        },
        // ...
    ]
},

3. 处理图片 url-loader

官网：webpack.docschina.org/loaders/url…

yarn add url-loader file-loader -D

// 模块解析：默认 webpack 只认识 js 文件，如果需要处理其他文件，需要配置对应的 loader
module: {
    rules: [
        // 配置图片文件的解析
        // url-loader 如果不配置，默认都会将文件转为 base64 字符串的格式
        {
            test: /\.(jpg|png|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    // 8k以内，转成 base64，节约请求次数，8k以外单独一个文件请求
                    options: {
                        limit: 8 * 1024,
                        // 配置输出的文件名
                        name: '[name].[ext]',
                        // 配置静态资源的引用路径
                        publicPath: '../images/',
                        // 配置输出的文件目录
                        outputPath: 'images/'
                    }
                }
            ]
        }
    ]
},

4、babel处理高版本的 js 语法兼容性

官网：webpack.docschina.org/loaders/bab…

yarn add babel-loader @babel/core @babel/preset-env webpack --dev

在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中

module: {
    rules: [
        // 配置高版本 js 的兼容性处理
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/, // 配置排除项
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
    ]
},