三言两语说透webpack对vue的编译

1写在前面

Webpack作为当下最流行的前端构建工具，它可以处理模块化的JavaScript项目，进行代码打包和优化。在Vue项目中，Webpack发挥着不可或缺的作用，它负责分析项目中的依赖图谱，递归地构建bundles，从而实现整个项目的构建。

那么Webpack是如何处理Vue单文件组件的呢？它又是通过哪些具体的步骤实现Vue项目的打包和部署的呢？这是每一个Vue开发者都应该理解和掌握的关键知识点。

2前置条件

当我们使用Vue CLI创建一个Vue项目时，会自动配置Webpack相关的配置。在项目的根目录下会有一个webpack.config.js文件，这就是Webpack的配置文件。

我们来看一下这个配置文件中与Vue相关的主要内容：

// webpack配置
const vueLoaderPlugin = require('vue-loader/lib/plugin') 

module.exports = {
  // ...省略其他配置
  
  module: {
    rules: [
      // ... 其他规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  plugins: [
    // 请确保引入这个插件!
    new vueLoaderPlugin()
  ]
}

vue-loader是Vue单文件组件(SFC)的 Webpack 加载器，它允许你以单文件组件的格式开发 Vue 组件。在 Vue 3 中，vue-loader 封装了 @vue/compiler-sfc，用于预处理单文件组件。我们来看看 vue-loader 的源码是如何工作的。

3源码分析

在vue-loader的源码中，定义了一个 NormalModule 类，这是 webpack 模块中代表一个模块的类。在它的 build 方法中，会调用 this._compile 方法对单文件组件进行加载和解析:

// webpack/lib/NormalModule.js

class NormalModule {
  // ...
  build(options, compilation, resolver, fs, callback) {
    this._compile(options, compilation, resolver, fs, (err, result) => {
      // 处理结果...
    });
  }

  _compile(options, compilation, resolver, fs, callback) {
    const loaderContext = this.createLoaderContext(resolver, options, fs, compilation);

    runLoaders(
      {
        resource: this.resource,
        loaders: this.loaders,
        context: loaderContext,
        readResource: fs.readFile.bind(fs)
      },
      (err, result) => {
        // 处理结果...
      }
    );
  }
}

在 _compile 中，会调用 runLoaders 方法，执行配置的所有 loader，其中就包含了 vue-loader。

接下来我们看一下 vue-loader 的源码，主要的是 pitch 方法:

// vue-loader/index.js

module.exports.pitch = function(remainingRequest) {
  const { loaders, resourcePath, resourceQuery } = this;

  const doTransform = !remainingRequest.includes(hotReloadAPIPath); 
  // 过滤热重载请求

  if (doTransform && resourceQuery && resourceQuery.includes('type=script')) {
    // 处理