编写库时的模块名称 Webpack 和 vue-cli

Question

TL;DR;

如何在--target lib模式下将webpackChunkName重命名为vue-cli？

大家好，我正在使用 vue-cli.

为 Vue js 创建一个库

此行将我的库输出到 umd、umd.min & common-js :

vue-cli-service build --target lib --name mylib ./src/components/mylib.vue --dest ./dist

由于我的lib有async模块（json文件中的i18n语言环境），我想修改Webpack来控制最终dist文件夹中所有文件的输出，但没有成功。

在我将所有语言环境文件外部化以提高性能之前，我有这个：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css

现在可以通过以下方式按需导入语言环境：

import(/* webpackInclude: /\.json$/, webpackChunkName: "[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))

这是输出：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- en.common.min.js
|- en.umd.js
|- en.umd.min.js
|- es.common.min.js
|- es.umd.js
|- es.umd.min.js
|- de.common.min.js
|- de.umd.js
|- de.umd.min.js
...

理想情况下，我只想为我的所有版本的库获取一个语言环境文件，因为生成的语言环境文件对于 umd 和 common 完全相同-js，并组织在一个文件夹中，如下所示：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- i18n
   |- en.js
   |- es.js
   |- de.js
   ...

我尝试调整导入 webpack magic comment 但得到了 3 个 i18n 文件夹，如下所示：

import(/* webpackInclude: /\.json$/, webpackChunkName: "i18n/[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))

dist/
|- mylib.common.
   |- i18n
   |- en.js
|- mylib.umd.
   |- i18n
   |- en.js
|- mylib.umd.min.
   |- i18n
   |- en.js

当我将它添加到我的 vue.config.js 时，它会将我的文档的构建修改为 docs/ (vue-cli-service build)，但它不适用于我的库 [=26] =] (vue-cli-service build --target lib):

  configureWebpack: {
    output: {
      filename: '[name].testing-bundle.js',
      chunkFilename: '[name].testing-bundle.js'
    }
  },

Answer 1

我终于找到了合适的解决方法！

我最终添加了一个构建后脚本（构建后自动触发）如下：

"postbuild-bundle": "rm -rf ./dist/libname.common.i18n ./dist/libname.umd.i18n && mv ./dist/libname.umd.min.i18n ./dist/i18n"

希望这对某人有所帮助。

编写库时的模块名称 Webpack 和 vue-cli

modules name Webpack & vue-cli when authoring library

webpack

vue-cli-3