TL; DR;
Как переименовать webpackChunkName
в vue-cli
в --target lib
режиме?
Привет, ребята, я создаю библиотеку для Vue js с vue-cli
.
Эта строка производит вывод моей библиотеки в umd, umd.min и common-js:
vue-cli-service build --target lib --name mylib ./src/components/mylib.vue --dest ./dist
Поскольку моя библиотека имеет асинхронные модули (локали i18n в файлах json), я хочу изменить 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
), но не работает для моей библиотеки в dist/
(vue-cli-service build --target lib
):
configureWebpack: {
output: {
filename: '[name].testing-bundle.js',
chunkFilename: '[name].testing-bundle.js'
}
},