How to separate a specified file using webpack in vue-cli project

Question

I have a config file (config.js), which depends on two files: local.js(for development environment) and deploy.js(for production environment). After run serve or run build, it will create some configurations rely on the environment. I used it like the following:

<template>
</template>
<script>
import config from '@/assets/scripts/config.js'
export default {
  data() {
     return {
       apiBasePath: config.apiBasePath
     }
  }
}
</script>

My config.js:

import local from '../../../config/local'
import deploy from '../../../config/deploy'
export default {
  apiBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':' + local.emergencyPort,
  fileBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : local.corsDomain + ':5000',
  dataBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.emergencyPort
      : 'http://localhost' + ':' + local.emergencyPort,
  vocApiPath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  visualBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.simulatorPort
      : local.corsDomain + ':' + local.simulatorPort,
  spotBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.samplePort
      : local.corsDomain + ':' + local.samplePort,
  shareBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.sharePort
      : local.corsDomain + ':' + local.sharePort,
  envBasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.envPort
      : local.corsDomain + ':' + local.envPort,
  ep360BasePath:
    process.env.NODE_ENV === 'production'
      ? deploy.corsDomain + ':' + deploy.ep360Port
      : local.corsDomain + ':' + local.ep360Port,
  defaultDivision: {
    province: deploy.defaultProvince ? deploy.defaultProvince : '浙江省',
    city: deploy.defaultCity ? deploy.defaultCity : '宁波市',
    area: deploy.defaultArea ? deploy.defaultArea : '鄞州区'
  }
}

But after buiding, these configurations will be insert in chunk-common scripts.
My destination is:
Split this config file from my common chunk as a single one(suppose its name is config.[hash].js) and it will become a script tag insert in HTML when run build. After that, I can change some configurations in server and needn't rebuild my project when I set some wrong configurations

More Detail: My project is a multiple-entries project, there is almost import the config.js in each entry. I tried the dynamic import as @Arunmozhi said, I can't get the configurations in the data function because of the Promise return although the config chunk is split. I'm trying to use splitChunks to solve my problems, but it didn't work.

optimization: {
  splitChunks: {
    cacheGroups: {
      myconfig: {
        test: module => {
          module
            .identifier()
            .split('/')
            .reduceRight(item => item)
            .indexOf('config') !== -1
        },
        name: 'myconfig',
        enforce: true,
        chunks: 'all',
        reuseExistingChunk: true,
        minChunks: 1,
        minSize: 0
      }
    }
  }
}

Answer 1

To have a separate script tag without going through the webpack processing, you should take it out of the src and move it to the public directory and add the script tag to the index.html. If you structure your config in such a way that it is available as a global object (for e.g., document.myAppConfig), then you can access the config values without having to do an import.

Edit: As commented, the config file that is shown is dependent on the BUILD process and can't be expected to be regenerated without rebuilding the project. However the closest one can get to achieving the flexibility of editing the configuration after building is to use the import() function instead of the ES6 import config from "config.js" module format.

If you can find a way to import the configuration like this

config: () => import(/* webpackChunkName: "config" */ "./config.js")

this would generate a separate chunk that you can later edit independently.

CAVEAT: This would create problems for the users due to web browsers caching resources.