摘要：但是，標簽內的怎么辦呢并不提供轉換這個的功能。開始行動了解的實現(xiàn)原理寫一個很簡單，傳入，干些壞事，干完之后，返回處理過的。對應的是每一個通過匹配到的文件。其實對應的就是這樣一個文件，該例子中有是需要轉換的目標，首先用正則把他們都找出來。

自從有了postcss來處理css文件，我們可以快速進行網站適配的開發(fā)，只需要改改參數，樣式按照設計稿的px寫，webpack編譯自動轉換成rem或者vw等。

但是，標簽內的px怎么辦呢？postcss并不提供轉換這個的功能。

我正在做一個vue項目，剛好想要實現(xiàn)上面提到的需求，例如下面的例子

Test

我希望他能根據我設置的基準值自動轉換成vw。

Test

要想實現(xiàn)這樣一個東西，離不開編譯工具webpack，webpack有l(wèi)oader、plugin，用什么好呢？通過找資料，我從一篇px轉rem的文章中得到了提示 react內聯(lián)樣式使用webpack將px轉rem

寫一個webpack loader，在webpack編譯階段，讀取vue文件里面的內容，通過正則識別出需要轉換的像素px，再通過公式轉換成vw。

1、了解loader的實現(xiàn)原理
寫一個loader很簡單，傳入source，干些壞事，干完之后，返回處理過的source。source對應的是每一個通過loader匹配到的文件。

module.exports = function (source) {
  // 干些壞事
  return source
}

2、如何讓loader干壞事
先看一個簡單的vue文件，通常分為3部分，