webpack二刷笔记(3)webpack的核心概念-loader

loader的概念

webpack 开箱可用的自带能力只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。loader本身是一个函数，接受源文件作为参数，返回转换的结果。

loader 用来描述 webpack 应该如何处理那些非 JavaScript 的模块，以及如何将这些模块打包进最终的包中

使用loader配置转换css文件

    cnpm i css-loader -D  # 安装css-loader依赖

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");

    module.exports = {
        mode: "none",
        entry: "./src/main.js",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "[name].[chunkhash:16].js",
        },
        module: {       // 在 module 中配置 loader
            rules: [    
                {   // webpack 编译器在碰到 require()/import 语句中被解析为 '.css' 的后缀文件时，在webpack打包之前，先 use(使用) css-loader 转换一下。
                    test: /.css$/,
                    use: "css-loader",
                },
            ],
        },
    };

test 属性，识别出哪些文件会被转换，指定匹配规则。 use 属性，定义出在进行转换时，指定应该使用哪个 loader。

处理样式常用的loader

    cnpm i css-loader -D        # css-loader 会对 @import 和 url() 引入的css文件进行处理，就像 js 解析 import/require() 一样。
    cnpm i less-loader - D      # less-loader是webpack 将 Less 编译为 CSS 的 loader
    cnpm i postcss-loader -D    
    cnpm i sass-loader -D       # sass-loader是webpack 将 Sass/SCSS 文件并将他们编译为 的 loader
    cnpm i style-loader -D      # style-loader 把 CSS 插入到 DOM 中

处理字体、图片类型文件的loader

    cnpm i url-loader image-loader -D 

处理js文件常用的loader

    cnpm i babel-loader @babel/core @babel/preset-env -D # 转换ES6/ES7/ES8等新语法
    cnpm i ts-loader -D         # 将ts 转化成 js

loader处理同一类型文字的执行顺序

    cnpm i style-loader css-loader less-loader -D # 依次安装 style-loader、 css-loader、 less-loader

// webpack.config.js
    module.exports = {
        module: {
            rules: [
                {
                    test: /.less$/,
                    use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        },
                    },
                    ],
                },
            ],
        },
    };

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在上面的示例中，从 less-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

loader概念参考：https://webpack.docschina.org/concepts/#loaders
loader的使用参考: https://webpack.docschina.org/concepts/loaders/
常用的loader参考: https://webpack.docschina.org/loaders/
loader的执行顺序: https://webpack.docschina.org/concepts/loaders/#configuration
ts-loader参考: https://github.com/TypeStrong/ts-loader