webpack+loader實戰案例詳解

這次帶給大家webpack loader實戰案例詳解，webpack loader實戰的注意事項有哪些，以下就是實戰案例，一起來看一下。

loader概念

loader是用來載入處理各種形式的資源,本質上是一個函數, 接受檔案作為參數,傳回轉化後的結構。

loader 用於轉換模組的原始程式碼。 loader 可以讓你在 import 或"載入"模組時預先處理檔案。因此，loader 類似於其他建置工具中“任務(task)”，並提供了處理前端建置步驟的強大方法。 loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript，或將內嵌圖像轉換為 data URL。 loader 甚至允許你直接在 JavaScript 模組中 import CSS檔！

loader和plugin區別

之前一篇文章中介紹了plugin機制,和今天研究的物件loader,他們兩者在一起極大的拓展了webpack的功能。它們的差別就是loader是用來對模組的源碼進行轉換,而插件目的在於解決 loader 無法實現的其他事。為什麼這麼多說呢?因為plugin可以在任何階段調用,能夠跨Loader進一步加工Loader的輸出,在構建運行期間,觸發事件,執行預先註冊的回調,使用compilation對像做一些更底層的事情。

loader用法

設定

module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: 'style-loader' },
     {
      loader: 'css-loader'
     }
    ]
   }
  ]
 }

#

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

webpack --module-bind 'css=style-loader!css-loader'

說明上面三種使用方法作用都是將一組鍊式的loader, 按照從右往左的順序執行,loader 鏈中的第一個loader 回傳值給下一個loader。先用css-loader解析 @import 和 url()路徑中指定的css內容,然後用style-loader 會把原來的 CSS 程式碼插入頁面中的一個 style 標籤中。

loader實作

//将css插入到head标签内部
module.exports = function (source) {
  let script = (`
   let style = document.createElement("style");
   style.innerText = ${JSON.stringify(source)};
   document.head.appendChild(style);
  `);
  return script;
}
//使用方式1
resolveLoader: {
  modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
  test: /\.css$/,
  use: ['style-loader']
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可

說明 上面是一個簡單的loader實作,同步的方式執行,相當於實作了style-loader的功能。

loader原則

function iteratePitchingLoaders(options, loaderContext, callback) {
  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
  // load loader module
  loadLoader(currentLoaderObject, function(err) {
    var fn = currentLoaderObject.pitch;
    runSyncOrAsync(
      fn,
      loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
      function(err) {
        if(err) return callback(err);
        var args = Array.prototype.slice.call(arguments, 1);
        if(args.length > 0) {
          loaderContext.loaderIndex--;
          iterateNormalLoaders(options, loaderContext, args, callback);
        } else {
          iteratePitchingLoaders(options, loaderContext, callback);
        }
      }
    );
  });
}

說明上面是webpack原始碼中loader執行關鍵步驟,遞歸的方式執行loader,執行機流程似於express中間件機制

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue Sortable專案實戰程式碼

#如何應用回應回寫渲染頁面

以上是webpack+loader實戰案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！