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

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

但是，標簽內(nèi)的px怎么辦呢？postcss并不提供轉(zhuǎn)換這個的功能。

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

Test

我希望他能根據(jù)我設(shè)置的基準值自動轉(zhuǎn)換成vw。

Test

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

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

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

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

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