Question

背景：我有一个由Vue-cli3.X创建的多页项目。在某些条目（页面）中导入了名为 aepConfig.js 的配置文件。这些配置将在生产中使用，例如Web端口，站点名称，API路径等。

问题：：使用npm run build构建生产代码后，我发现这些配置将捆绑到chunk-common.js中。

目标：我想将这些配置代码拆分为一个文件，例如： aepConfig。[hash] .js

我尝试了以下方法：

使用动态导入config: () => import(/* webpackChunkName: "aepConfig" */ "./aepConfig.js")。这种方法肯定会拆分代码，但是我在语法上使用这些配置，并且动态导入将返回一个Promise。
使用如下所示的splitChunk，但是无论我设置了什么选项，它都不会生成 aepConfig。[hash] .js （也许我丢失了一些东西）。

splitChunks: {
  cacheGroups: {
   // I didn't know the key if is correct.
   // Maybe use 'common'? Anyone can explain it?
    aepConfig: {
      test: module => {
        module
          .identifier()
          .split('/')
          .reduceRight(item => item)
          .indexOf('aepConfig') !== -1
      },
      enforce: true,
      chunks: 'all',
      reuseExistingChunk: true,
      maxInitialRequests: 20,
      minChunks: 1,
      minSize: 0,
      priority: 10
    }
  }
}

使用chainWebpack：

chainWebpack: config => {
  config.entry('aepConfig').add('@/assets/scripts/aepConfig.js')
}

此方法拆分代码，并生成aepConfig。[hash] .js，但在此文件中，我发现：

// snippets code in aepConfig.[hash].js
e.exports = t("b8e3");

“ b8e3”表示函数的名称，该函数将在 chunck-common中返回我的配置。[hash] .js

// snippets code in chunck-common.[hash].js
b8e3: function(e, n) {
  e.exports = {
    corsDomain: "http://example.domain.com",
    corsMainPort: 80,
    sharePort: 81,
    samplePort: 85,
    simulatorPort: 86,
    emergencyPort: 83,
    frameJS: "/scripts/frame.js",
    defaultProvince: "XX省",
    defaultCity: "XX市",
    defaultArea: "XX区"
  };
}

Emm ...此代码就像脱裤子放屁一样。如果可以将 chunk-common。[hash] .js 中关于确认的代码移到 aepConfig。[hash] .js 中，那将是完美的。

我考虑在某些条目的模板文件（index.html）中添加<script src="/js/aepConfig.[hash].js"></script>。但是它需要修改许多文件，并将aepConfig.js转换为UMD，因为我将此配置文件导入了一些js文件。

所以〜

我想知道是否有可能实现我的目标。
问题1：在第二种方法中，aepConfig下面的键cacheGroups是否正确？
问题2：为什么我的配置代码仍然在第三种方法中的chunk-common.js中？

停止在vue-cli3.x中使用webpack4将配置文件捆绑到chunk-common.js中

0 个答案: