Two external implementation methods of webpack configuration file

Preface

As we all know, webpack configures environment variable files to find the corresponding environment variable files based on packaging commands to obtain the interface address. Therefore, the triggering time is when every time you package it, the interface address will be packaged and cannot be modified freely.
This time, after packaging, modify the file of the interface address and refresh the page to update the interface address.

There are two methods: one is to install the generate-asset-webpack-plugin plugin, and the other is to expose the interface address to window and become a global variable.

Method (I) Install the generate-asset-webpack-plugin plugin

Install the plug-in first

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

In the build folder, create a new file

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

function createServerConfig(compilation) {
    return (
        ({
            _hash: ,
        },config)
    )
}
// Generate file = () => {
    return new GenerateAssetPlugin({
        filename: 'config/',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        }
    })
}

In the config folder, create

 = {
  env: 'prod',
  baseUrl: ""
}

This is a commonly used configuration file. In the development environment, use variables can be directly introduced.
In a formal environment, it also needs to be configured in a folder. First introduce:

const packageConfig = require('../')
const generateAssetAppConfig = require('./')

Add plugins configuration

 = {
  context: (__dirname, '../'),
  entry: {
    app: './src/'
  },
  output: {
    path: ,
    filename: '[name].js',
    publicPath: .NODE_ENV === 'production'
      ? 
      : 
  },
  plugins: [
    generateAssetAppConfig(packageConfig)
  ],

In axios request to encapsulate the file, extract the encapsulated configuration file
The development environment directly obtains variables based on the path, and the formal environment is obtained from the request

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

if (.NODE_ENV === 'production') {//Use in formal environment    $.ajax({
        url: 'config/',
        async: false,
        type: 'get',
        dataType: "json",
        success: function (rs) {
            if () {
                 = ;
            }
        }
    });
} else {// Use it directly in the development environment     = ;   //Configure the interface address}

above
Using npm run dev, use the config/file of the machine directly
Use npm run build to use dist/config/file on the server

Method (II) Exposed to window to become a global variable

Create in the config directory

let baseURL = "";

 = {
  baseURL,
};

When packaging the official environment, copy it to the static directory
build/modify as follows:

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

Then introduce it in

 <script src="/static/"></script>

In the axios configuration file, configure the interface address

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

// If it is a formal environment, go to the configuration file to obtain it. If it is a development environment, go to the local file =
  .NODE_ENV === "production"
    ? 
    : ;

This is the end of this article about the two implementations of webpack configuration file external content. For more related webpack configuration file external content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!