resolveWcConfig.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. const path = require('path')
  2. const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
  3. module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
  4. // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
  5. process.env.VUE_CLI_CSS_SHADOW_MODE = true
  6. const { log, error } = require('@vue/cli-shared-utils')
  7. const abort = msg => {
  8. log()
  9. error(msg)
  10. process.exit(1)
  11. }
  12. const isAsync = /async/.test(target)
  13. // generate dynamic entry based on glob files
  14. const resolvedFiles = require('globby').sync(entry.split(','), { cwd: api.resolve('.') })
  15. if (!resolvedFiles.length) {
  16. abort(`entry pattern "${entry}" did not match any files.`)
  17. }
  18. let libName
  19. let prefix
  20. if (resolvedFiles.length === 1) {
  21. // in single mode, determine the lib name from filename
  22. libName = name || fileToComponentName('', resolvedFiles[0]).kebabName
  23. prefix = ''
  24. if (libName.indexOf('-') < 0) {
  25. abort(`--name must contain a hyphen when building a single web component.`)
  26. }
  27. } else {
  28. // multi mode
  29. libName = prefix = (name || api.service.pkg.name)
  30. if (!libName) {
  31. abort(`--name is required when building multiple web components.`)
  32. }
  33. }
  34. const dynamicEntry = resolveEntry(prefix, libName, resolvedFiles, isAsync)
  35. function genConfig (minify, genHTML) {
  36. const config = api.resolveChainableWebpackConfig()
  37. // make sure not to transpile wc-wrapper
  38. config.module
  39. .rule('js')
  40. .exclude
  41. .add(/vue-wc-wrapper/)
  42. // only minify min entry
  43. if (!minify) {
  44. config.optimization.minimize(false)
  45. }
  46. config
  47. .plugin('web-component-options')
  48. .use(require('webpack').DefinePlugin, [{
  49. 'process.env.CUSTOM_ELEMENT_NAME': JSON.stringify(libName)
  50. }])
  51. // enable shadow mode in vue-loader
  52. config.module
  53. .rule('vue')
  54. .use('vue-loader')
  55. .tap(options => {
  56. options.shadowMode = true
  57. return options
  58. })
  59. if (genHTML) {
  60. config
  61. .plugin('demo-html')
  62. .use(require('html-webpack-plugin'), [{
  63. template: path.resolve(__dirname, `./demo-wc.html`),
  64. inject: false,
  65. filename: 'demo.html',
  66. libName,
  67. components:
  68. prefix === ''
  69. ? [libName]
  70. : resolvedFiles.map(file => {
  71. return fileToComponentName(prefix, file).kebabName
  72. })
  73. }])
  74. }
  75. // set entry/output last so it takes higher priority than user
  76. // configureWebpack hooks
  77. // set proxy entry for *.vue files
  78. config.resolve
  79. .alias
  80. .set('~root', api.resolve('.'))
  81. const rawConfig = api.resolveWebpackConfig(config)
  82. // externalize Vue in case user imports it
  83. rawConfig.externals = [
  84. ...(Array.isArray(rawConfig.externals) ? rawConfig.externals : [rawConfig.externals]),
  85. { ...(inlineVue || { vue: 'Vue' }) }
  86. ].filter(Boolean)
  87. const entryName = `${libName}${minify ? `.min` : ``}`
  88. rawConfig.entry = {
  89. [entryName]: dynamicEntry
  90. }
  91. Object.assign(rawConfig.output, {
  92. // to ensure that multiple copies of async wc bundles can co-exist
  93. // on the same page.
  94. jsonpFunction: libName.replace(/-\w/g, c => c.charAt(1).toUpperCase()) + '_jsonp',
  95. filename: `${entryName}.js`,
  96. chunkFilename: `${libName}.[name]${minify ? `.min` : ``}.js`,
  97. // use dynamic publicPath so this can be deployed anywhere
  98. // the actual path will be determined at runtime by checking
  99. // document.currentScript.src.
  100. publicPath: ''
  101. })
  102. return rawConfig
  103. }
  104. return [
  105. genConfig(false, true),
  106. genConfig(true, false)
  107. ]
  108. }