webpack打包dist文件導出配置文件.json供外部配置

　　大家在日常開發上線，上預發，測試環境的時候，一定遇到過不同環境，配置項不同的情況，比如不同的環境部署的代碼一致，只有Host需要配置不同。這個時候，如果每次都要重新修改代碼，不僅顯得不專業，也容易在提交的時候忘記這個配置，提交錯誤就是上線災難。所以，有必要在打包后的文件中生成配置文件，供在外部修改配置。本篇就是為了解決這個問題而寫~~

　　這要用到一個webpack插件generate-asset-webpack-plugin

Install

npm install --save-dev generate-asset-webpack-plugin

 

在webpack.prod.cong.js中引入該插件

const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

在項目根目錄下建立配置文件serverConfig.json

內部配置為{"baseUrl":""}

將該配置文件引入

const serverConfig = require('../serverConfig.json')

 

將Json中的配置項返回

const createJson = function(compilation) {
  return JSON.stringify(serverConfig)
}

 

在webpackConfig -> plugin中寫入

new GeneraterAssetPlugin({
  filename: 'serverConfig.json',//輸出到dist根目錄下的serverConfig.json文件,名字可以按需改
  fn: (compilation, cb) => {
    cb(null, createJson(compilation));
  }
})

 

在引入axios的文件中做如下配置

axios.get('serverConfig.json').then((result) => {
  window.localStorage['JSON_HOST'] = result.data.baseUrl
}).catch((error) => { console.log(error) });

 

利用localStorage存儲JSON_HOST配置值，需要取時再取出JSON_HOST，再將需要配置host的地方寫成

host: window.localStorage['JSON_HOST']

 

打包后在根目錄就會生成如下dist文件

外部就可以通過修改該配置文件，變更host了