前言#
之前的文章中提到loader是在哪执行的，有兴趣的大佬可以去看下。
坏蛋Dan：webpack5流程分析4 - NormalFactory、loader、plugin相关
另外由于有些是在公司写的，有些是在家里写的，所以截图内容会有些不同，但不影响分析。
配置#
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: './main.js',
output: {
path: require('path').resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
clean: true,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new VueLoaderPlugin()
],
mode: 'development',
devServer: {
port: 8888,
hot: true,
}
}正文#
在进入loader的入口前，我们得知道loader是在什么时候在哪里被调用的。之前的文章里分析过了，在NormalModule的_doBuild中执行，也就是module被转换成source的时候调用。并且是用了一个名叫loader-runner的包。
然后直接进入主题，先来看下代码，200多行，我们一点一点分析。
function loader(source) {
// 省略
return code;
}先来看下source是什么
调试工具里没法截图全部，所以这里只有一个``