dynamic-replace-loaderWebpack 加載器

dynamic-replace-loader 為一個(gè) Webpack Loader，用于對(duì) js 文件內(nèi)指定內(nèi)容進(jìn)行匹配替換。

典型的使用場(chǎng)景：

一個(gè)類中的私有屬性，我們希望打包后可以動(dòng)態(tài)隨機(jī)地更換為其他名稱

例：

User._propA希望打包后替換為其他屬性名，只需在文件開(kāi)頭加上注釋 /* DYNAMIC-REPLACE _propA */

/* DYNAMIC-REPLACE _propA */
class User {
  constructor() {
    this._propA = 'private context'
  }

  printPropA() {
    console.log(this._propA)
  }
}

打包后loader輸出為

/* DYNAMIC-REPLACE _propA */
class User {
  constructor() {
    this.MX = 'private context'
  }

  printPropA() {
    console.log(this.MX)
  }
}

安裝

npm install --save-dev dynamic-replace-loader

webpack配置，webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'dynamic-replace-loader',
      },
    ],
  },
};