日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

1寫在前面

Webpack作為當(dāng)下最流行的前端構(gòu)建工具，它可以處理模塊化的JavaScript項目，進行代碼打包和優(yōu)化。在Vue項目中，Webpack發(fā)揮著不可或缺的作用，它負(fù)責(zé)分析項目中的依賴圖譜，遞歸地構(gòu)建bundles，從而實現(xiàn)整個項目的構(gòu)建。

那么Webpack是如何處理Vue單文件組件的呢？它又是通過哪些具體的步驟實現(xiàn)Vue項目的打包和部署的呢？這是每一個Vue開發(fā)者都應(yīng)該理解和掌握的關(guān)鍵知識點。

2前置條件

當(dāng)我們使用Vue CLI創(chuàng)建一個Vue項目時，會自動配置Webpack相關(guān)的配置。在項目的根目錄下會有一個webpack.config.js文件，這就是Webpack的配置文件。

我們來看一下這個配置文件中與Vue相關(guān)的主要內(nèi)容：

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

module.exports = {
  // ...省略其他配置
  
  module: {
    rules: [
      // ... 其他規(guī)則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  plugins: [
    // 請確保引入這個插件!
    new vueLoaderPlugin()
  ]
}

vue-loader是Vue單文件組件(SFC)的 Webpack 加載器，它允許你以單文件組件的格式開發(fā) Vue 組件。在 Vue 3 中，vue-loader 封裝了 @vue/compiler-sfc，用于預(yù)處理單文件組件。我們來看看 vue-loader 的源碼是如何工作的。

3源碼分析

在vue-loader的源碼中，定義了一個 NormalModule 類，這是 webpack 模塊中代表一個模塊的類。在它的 build 方法中，會調(diào)用 this._compile 方法對單文件組件進行加載和解析:

// webpack/lib/NormalModule.js

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

  _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) => {
        // 處理結(jié)果...
      }
    );
  }
}

在 _compile 中，會調(diào)用 runLoaders 方法，執(zhí)行配置的所有 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')) {
    // 處理