我們經(jīng)常遇到項(xiàng)目開發(fā)時候api的一個地址比如www.baidu.dev.com,上線之后要改成www.baidu.com的需求,可是webpack沒有對應(yīng)的插件,也可能是我沒找到,于是乎,自己搞一個吧

const fs = require('fs')
const join = require('path').join
const path = require('path')
const chalk = require('chalk')
// 線上地址
const API_ROOT = 'www.baidu.com'

// 找目錄下的所有文件
 findSync = (startPath) => {
  let result = []
   finder = (path) => {
    let files = fs.readdirSync(path)
    files.forEach((val, index) => {
      let fPath = join(path, val)
      let stats = fs.statSync(fPath)
      if (stats.isDirectory()) {
        finder(fPath)
      }
      if (stats.isFile()) {
        result.push(fPath)
      }
    })
  }

  finder(startPath)
  return result
}

let fileNames = findSync('./dist/static/js')
fileNames.forEach(item => {
  fs.readFile(item, (err, data) => {
    data = data + ''
// 測試地址
    if (data.indexOf('www.dev.baidu.com') != -1) {
      data = data.replace('www.dev.baidu.com', API_ROOT)
      fs.writeFile(item, data, (err) => {
        if (err) throw err
        console.log(chalk.blue('文件', item))
        console.log(chalk.red('路徑替換完畢', API_ROOT))
      })
    }
  })
})

搞定
還可以加到 package 里面 ,通過npm 來運(yùn)行,這個看自己的需求了

--------------------------------------大大的分割線---------------------------------------------

突然腦洞打開,webpack沒有類似的插件,但是webpack有dev環(huán)境和prod環(huán)境,這樣一來就好說了,上步驟

1.找到dev.env.js,初始是這樣的

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
})

我們在env下面加入API_ROOT: '"baidu.dev.com"'
現(xiàn)在是這樣

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"baidu.dev.com"'
})

2.找到prod.env.js,初始是這樣的

'use strict'
module.exports = {
  NODE_ENV: '"production"',
}

我們在env下面加入 API_ROOT: '"baidu.com"'

現(xiàn)在是這樣

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"baidu.com"'
}

3.修改定義api的地方,從process.env里面拿API_ROOT,改成如下
export const API_ROOT = process.env.API_ROOT

總結(jié) npm run dev 的時候因?yàn)槭情_發(fā)環(huán)境,所以API_ROOT是dev.baidu.com,
npm run build 的時候是生產(chǎn)環(huán)境,API_ROOT是baidu.com,好了,玩耍吧