webpack.common.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. /* eslint-disable camelcase */
  2. /**
  3. * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  4. * SPDX-License-Identifier: AGPL-3.0-or-later
  5. */
  6. const { VueLoaderPlugin } = require('vue-loader')
  7. const path = require('path')
  8. const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
  9. const webpack = require('webpack')
  10. const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
  11. const WorkboxPlugin = require('workbox-webpack-plugin')
  12. const modules = require('./webpack.modules.js')
  13. const { readFileSync } = require('fs')
  14. const appVersion = readFileSync('./version.php').toString().match(/OC_VersionString[^']+'([^']+)/)?.[1] ?? 'unknown'
  15. const formatOutputFromModules = (modules) => {
  16. // merge all configs into one object, and use AppID to generate the fileNames
  17. // with the following format:
  18. // AppId-fileName: path/to/js-file.js
  19. const moduleEntries = Object.keys(modules).map(moduleKey => {
  20. const module = modules[moduleKey]
  21. const entries = Object.keys(module).map(entryKey => {
  22. const entry = module[entryKey]
  23. return { [`${moduleKey}-${entryKey}`]: entry }
  24. })
  25. return Object.assign({}, ...Object.values(entries))
  26. })
  27. return Object.assign({}, ...Object.values(moduleEntries))
  28. }
  29. const modulesToBuild = () => {
  30. const MODULE = process?.env?.MODULE
  31. if (MODULE) {
  32. if (!modules[MODULE]) {
  33. throw new Error(`No module "${MODULE}" found`)
  34. }
  35. return formatOutputFromModules({
  36. [MODULE]: modules[MODULE],
  37. })
  38. }
  39. return formatOutputFromModules(modules)
  40. }
  41. module.exports = {
  42. entry: modulesToBuild(),
  43. output: {
  44. // Step away from the src folder and extract to the js folder
  45. path: path.join(__dirname, 'dist'),
  46. // Let webpack determine automatically where it's located
  47. publicPath: 'auto',
  48. filename: '[name].js?v=[contenthash]',
  49. chunkFilename: '[name]-[id].js?v=[contenthash]',
  50. // Make sure sourcemaps have a proper path and do not
  51. // leak local paths https://github.com/webpack/webpack/issues/3603
  52. devtoolNamespace: 'nextcloud',
  53. devtoolModuleFilenameTemplate(info) {
  54. const rootDir = process?.cwd()
  55. const rel = path.relative(rootDir, info.absoluteResourcePath)
  56. return `webpack:///nextcloud/${rel}`
  57. },
  58. clean: {
  59. keep: /icons\.css/, // Keep static icons css
  60. },
  61. },
  62. module: {
  63. rules: [
  64. {
  65. test: /davclient/,
  66. loader: 'exports-loader',
  67. options: {
  68. type: 'commonjs',
  69. exports: 'dav',
  70. },
  71. },
  72. {
  73. test: /\.css$/,
  74. use: ['style-loader', 'css-loader'],
  75. },
  76. {
  77. test: /\.scss$/,
  78. use: ['style-loader', 'css-loader', 'sass-loader'],
  79. },
  80. {
  81. test: /\.vue$/,
  82. loader: 'vue-loader',
  83. exclude: BabelLoaderExcludeNodeModulesExcept([
  84. 'vue-material-design-icons',
  85. 'emoji-mart-vue-fast',
  86. ]),
  87. },
  88. {
  89. test: /\.tsx?$/,
  90. use: [
  91. 'babel-loader',
  92. {
  93. // Fix TypeScript syntax errors in Vue
  94. loader: 'ts-loader',
  95. options: {
  96. transpileOnly: true,
  97. },
  98. },
  99. ],
  100. exclude: BabelLoaderExcludeNodeModulesExcept([]),
  101. },
  102. {
  103. test: /\.js$/,
  104. loader: 'babel-loader',
  105. // automatically detect necessary packages to
  106. // transpile in the node_modules folder
  107. exclude: BabelLoaderExcludeNodeModulesExcept([
  108. '@nextcloud/dialogs',
  109. '@nextcloud/event-bus',
  110. 'davclient.js',
  111. 'nextcloud-vue-collections',
  112. 'p-finally',
  113. 'p-limit',
  114. 'p-locate',
  115. 'p-queue',
  116. 'p-timeout',
  117. 'p-try',
  118. 'semver',
  119. 'striptags',
  120. 'toastify-js',
  121. 'v-tooltip',
  122. 'yocto-queue',
  123. ]),
  124. },
  125. {
  126. test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
  127. type: 'asset/inline',
  128. },
  129. {
  130. test: /\.handlebars/,
  131. loader: 'handlebars-loader',
  132. },
  133. {
  134. resourceQuery: /raw/,
  135. type: 'asset/source',
  136. },
  137. ],
  138. },
  139. optimization: {
  140. splitChunks: {
  141. automaticNameDelimiter: '-',
  142. minChunks: 3, // minimum number of chunks that must share the module
  143. cacheGroups: {
  144. vendors: {
  145. // split every dependency into one bundle
  146. test: /[\\/]node_modules[\\/]/,
  147. // necessary to keep this name to properly inject it
  148. // see OC_Template.php
  149. name: 'core-common',
  150. chunks: 'all',
  151. },
  152. },
  153. },
  154. },
  155. plugins: [
  156. new VueLoaderPlugin(),
  157. new NodePolyfillPlugin(),
  158. new webpack.ProvidePlugin({
  159. // Provide jQuery to jquery plugins as some are loaded before $ is exposed globally.
  160. // We need to provide the path to node_moduels as otherwise npm link will fail due
  161. // to tribute.js checking for jQuery in @nextcloud/vue
  162. jQuery: path.resolve(path.join(__dirname, 'node_modules/jquery')),
  163. }),
  164. new WorkboxPlugin.GenerateSW({
  165. swDest: 'preview-service-worker.js',
  166. clientsClaim: true,
  167. skipWaiting: true,
  168. exclude: [/.*/], // don't do pre-caching
  169. inlineWorkboxRuntime: true,
  170. sourcemap: false,
  171. // Increase perfs with less logging
  172. disableDevLogs: true,
  173. // Define runtime caching rules.
  174. runtimeCaching: [{
  175. // Match any preview file request
  176. // /apps/files_trashbin/preview?fileId=156380&a=1
  177. // /core/preview?fileId=155842&a=1
  178. urlPattern: /^.*\/(apps|core)(\/[a-z-_]+)?\/preview.*/i,
  179. // Apply a strategy.
  180. handler: 'CacheFirst',
  181. options: {
  182. // Use a custom cache name.
  183. cacheName: 'previews',
  184. // Only cache 10000 images.
  185. expiration: {
  186. maxAgeSeconds: 3600 * 24 * 7, // one week
  187. maxEntries: 10000,
  188. },
  189. },
  190. }],
  191. }),
  192. // Make appName & appVersion available as a constants for '@nextcloud/vue' components
  193. new webpack.DefinePlugin({ appName: JSON.stringify('Nextcloud') }),
  194. new webpack.DefinePlugin({ appVersion: JSON.stringify(appVersion) }),
  195. // @nextcloud/moment since v1.3.0 uses `moment/min/moment-with-locales.js`
  196. // Which works only in Node.js and is not compatible with Webpack bundling
  197. // It has an unused function `localLocale` that requires locales by invalid relative path `./locale`
  198. // Though it is not used, Webpack tries to resolve it with `require.context` and fails
  199. new webpack.IgnorePlugin({
  200. resourceRegExp: /^\.\/locale$/,
  201. contextRegExp: /moment\/min$/,
  202. }),
  203. ],
  204. externals: {
  205. OC: 'OC',
  206. OCA: 'OCA',
  207. OCP: 'OCP',
  208. },
  209. resolve: {
  210. alias: {
  211. // make sure to use the handlebar runtime when importing
  212. handlebars: 'handlebars/runtime',
  213. vue$: path.resolve('./node_modules/vue'),
  214. },
  215. extensions: ['*', '.ts', '.js', '.vue'],
  216. extensionAlias: {
  217. /**
  218. * Resolve TypeScript files when using fully-specified esm import paths
  219. * https://github.com/webpack/webpack/issues/13252
  220. */
  221. '.js': ['.js', '.ts'],
  222. },
  223. symlinks: true,
  224. fallback: {
  225. fs: false,
  226. },
  227. },
  228. }