webpack配置文件外置的兩種實現(xiàn)方式

更新時間：2023年12月13日 16:12:47 作者：yazhiShaw

webpack配置環(huán)境變量文件,是根據(jù)打包命令尋找對應的環(huán)境變量文件,從而獲取接口地址,本文就來介紹一下webpack配置文件外置的兩種實現(xiàn)方式,感興趣的可以了解一下

前言

眾所周知，webpack配置環(huán)境變量文件，是根據(jù)打包命令尋找對應的環(huán)境變量文件，從而獲取接口地址。所以觸發(fā)時機是在每次打包的時候，接口地址才會被打包進去，無法自由修改。
本次要求一次打包后，修改接口地址的文件，刷新頁面可達到更新接口地址。

有兩種方法，一是安裝generate-asset-webpack-plugin插件，二是把接口地址暴露在window成為全局變量

方法（一）安裝generate-asset-webpack-plugin插件

首先安裝插件

npm install generate-asset-webpack-plugin -S -D

在build文件夾下，新建一個文件generate-asset.config.js

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app.config');

function createServerConfig(compilation) {
    return JSON.stringify(
        Object.assign({
            _hash: compilation.hash,
        },config)
    )
}
//生成app-config.json文件
module.exports = () => {
    return new GenerateAssetPlugin({
        filename: 'config/app-config.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        }
    })
}

在config文件夾下，創(chuàng)建app.conifg.js

module.exports = {
  env: 'prod',
  baseUrl: "http://xxx.com"
}

這里就是常用的配置文件，在開發(fā)環(huán)境下，可以直接引入使用變量。
在正式環(huán)境下，還需要在webpack.base.conf.js文件夾下配置下。先引入：

const packageConfig = require('../package.json')
const generateAssetAppConfig = require('./generate-asset.config')

再加入plugins的配置

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  plugins: [
    generateAssetAppConfig(packageConfig)
  ],

在axios請求封裝文件，抽離封裝了一個https.js的配置文件
開發(fā)環(huán)境直接根據(jù)路徑獲取變量，正式環(huán)境從請求app-config.json獲得

import * as g from '../config/app.config'
import $ from 'jquery'

if (process.env.NODE_ENV === 'production') {//打包正式環(huán)境使用app-config.json
    $.ajax({
        url: 'config/app-config.json',
        async: false,
        type: 'get',
        dataType: "json",
        success: function (rs) {
            if (rs.baseUrl) {
                axios.defaults.baseURL = rs.baseUrl;
            }
        }
    });
} else {//開發(fā)環(huán)境就直接使用app.config.js
    axios.defaults.baseURL = g.baseUrl;   //配置接口地址
}

以上
使用npm run dev，就直接用本機的config/app.config.js文件
使用npm run build 就用在服務器上的dist/config/app-config.json文件

方法（二）暴露在window成為全局變量

在config目錄下創(chuàng)建app.config.js

let baseURL = "http://xxx.com";

window.httpConfig = {
  baseURL,
};

打包正式環(huán)境時，把app.config.js拷貝到static目錄下
build/webpack.prod.conf.js修改如下：

	new CopyWebpackPlugin([
      {
        from: "./config/app.config.js",
        to: 'static',
      },
    ]),

然后在index.html中引入

 <script src="/static/app.config.js"></script>

在axios的配置文件中，配置接口地址

import * as g from '../config/app.config'

// 如果是正式環(huán)境打包，去配置文件獲取，如果是開發(fā)環(huán)境，去獲取本機的app.config文件
axios.defaults.baseURL =
  process.env.NODE_ENV === "production"
    ? window.httpConfig.baseURL
    : g.baseURL;

到此這篇關于webpack配置文件外置的兩種實現(xiàn)方式的文章就介紹到這了,更多相關webpack配置文件外置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: