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

时间 2019-12-10

标签 webpack 打包 dist 文件导出配置文件 json 外部配置栏目 JavaScript 繁體版

原文原文链接

你们在平常开发上线，上预发，测试环境的时候，必定遇到过不一样环境，配置项不一样的状况，好比不一样的环境部署的代码一致，只有Host须要配置不一样。这个时候，若是每次都要从新修改代码，不只显得不专业，也容易在提交的时候忘记这个配置，提交错误就是上线灾难。因此，有必要在打包后的文件中生成配置文件，供在外部修改配置。本篇就是为了解决这个问题而写~~webpack

这要用到一个webpack插件generate-asset-webpack-pluginios

Install

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

在webpack.prod.cong.js中引入该插件web

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

在项目根目录下创建配置文件serverConfig.json
内部配置为{"baseUrl":""}
将该配置文件引入npm

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

将Json中的配置项返回json

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

在webpackConfig -> plugin中写入axios

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的地方写成ui

host: window.localStorage['JSON_HOST']

打包后在根目录就会生成以下dist文件spa

外部就能够经过修改该配置文件，变动host了插件