Webpack5 - 常用Loader（资源加载器）

一. Webpack的Loader是什么

Loader是webpack的核心特性，借助Loader 就可以加载（打包）任何类型的资源。

webpack 只是打包平台，必须借助加载器来编译转换代码。

另：webpack 仅能处理 ES2015+中的 import 和 export， 对于其它 es6+ 的新特性是无额外处理的，额外处理需要babel-loader。

 

webpack 支持的模块加载方式（但在每个具体项目中，推荐只用一种模块规范！）：

    遵循 ES Modules 标准的 import 声明

    遵循 CommongJS 标准的 require 函数

    遵循 AMD 标准的 define 函数和 require 函数

    * 样式代码中的 @import 指令和 url 函数

    * HTML 代码中图片标签的 src 属性

二. 常用的Webpack Loader 

常用的 webpack loader	作用
babel-loader	加载 ES2015+ 代码，打包成使用 Babel 转译成的 ES5
css-loader	将css资源文件资源转换为js代码 （需要和 style-loader 一起使用）
style-loader	将css资源转换成的js代码 以style标签的形式载入页面
file-loader	把文件（如图片，字体资源文件）发送到输出文件夹
url-loader	像 file loader 一样工作，但如果文件小于限制，可以打包为 data URL 到js代码中 （仅打包图片的话 url-loader 和 file-loader两者择一即可）

   更多webpack loader 参见webpack 文档： https://www.webpackjs.com/loaders/
   

   上面常用 webpack Loader的使用方法，见 webpack.config.js ：

module.exports = {
    // ... 此处省略webpack.config.js文件其它部分

    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /.css$/,       // 匹配 .css 文件
                use: [               // 对匹配文件 从后到前 执行 loader
                    'style-loader',  // 把 打包成的 js 代码，挂载到 Document
                    'css-loader',    // 将 .css 文件打包为 js代码
                ]
            },
            // {
            //     test: /.jpeg$/,
            //     use: 'file-loader'
            // },
            {
                test: /.jpeg$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024 // 10 KB
                    }
                }
            },
        ]
    }
}

本文 完。