自定义 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
}
