自定义 webpack Loader

啥是 webpack Loader

webpack 的核心功能只能处理 JS json 文件。但是同时，webpack 对文件的处理功能是可扩展的，如果需要处理图片，.css，.vue 等文件，就需要专门的 loader

loader 本质上是 node 模块或者说一个用 node 写的功能函数，在函数中对接收到的内容进行处理然后输出

常见的内置 loader

1，css-loader 和 style-loader

//使用

module.exports = {
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"],
                include: /src/,
                exclude: /node_modules/
            }
        ]
    }
};

//说明：module.rules 代表处理文件的规则，rules 是一个数组，包含多种规则；每一种规则都包含一个正则来匹配不同后缀的文件，use 是一个数组，用来包含所有可处理这中文件的 loader；
include 表示只能处理该正则能匹配到的模块内部的文件
exclude 表示忽略该正则能匹配到的模块内部的文件

2，babel-loader
该 loader 用于将 ES6+语法转换为 ES5 语法
//使用

rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/, //排除掉，不排除拖慢打包的速度
        use: {
            loader: "babel-loader",
            options: {
                cacheDirectory: true, // 启用缓存机制以防止在重新打包未更改的模块时进行二次编译
                presets: [
                    [
                        "env",
                        {
                            modules: false // 将ES6 Module的语法交给Webpack本身处理
                        }
                    ]
                ]
            }
        }
    }
];

3,html-loader
前面说过，webpack 内核只认识 js，json 等文件，所以处理 html 也需要用到 loader ####另外一些常用 loader
file-loader：用来加载图片等文件

const path = require("path");
module.exports = {
    entry: "./index.js",
    output: {
        path: path.join(__dirname, "dist"), //将图片放在统一位置
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: "file-loader"
            }
        ]
    }
};

url-loader：类似 file-loader，但是可以设置图片大小的阈值，小于阈值的返回 base64 而不是静态文件地址

rules: [
    {
        test: /\.(png|jpg|gif)$/,
        use: {
            loader: "url-loader",
            options: {
                limit: 1024,
                name: "[name].[ext]",
                publicPath: "./assets/"
            }
        }
    }
];

ts-loader:处理.ts 文件
vue-loader:处理.vue 文件

缓存

如果为每个构建重复执行操作，构建webpack会非常慢。webpack会默认缓存执行后的结果，除非再次构建的文件有变更

如果想每次都构建，可以在loader中使用

this.cacheable(false)

处理二进制文件

默认情况下，source返回的是一个utf-8内容的字符文本
可以通过以下方式告诉webpack拿到的是二进制文件

module.exports = function(source) {    
    // 在 exports.raw === true 时，Webpack 传给 Loader 的 source 是 Buffer 类型的    
    source instanceof Buffer === true;    
    // Loader 返回的类型也可以是 Buffer 类型的    
    // 在 exports.raw !== true 时，Loader 也可以返回 Buffer 类型的结果    
    return source;
};
// 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
module.exports.raw = true;

手写自定义的 loader

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [
        {
          loader: 'my-loader',
          options: {
            flag: true
          }
        }
      ]
    }]
  },
  resolveLoader: {
    modules: ['./src/loader', 'node_modules']
  },
  devServer: {
    contentBase: './dist',
    overlay: {
      warnings: true,
      errors: true,
    },
    open: true,
  }
}

my-loader.js

const loaderUtils = require('loader-utils')
module.exports = function (source) {
  const options = loaderUtils.getOptions(this)
  console.log(options, 'loaderUtils')
  this.callback(null, source.replace('world', '世界'))
  return
}