webpack.config.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. const path = require('path');
  2. const CopyPlugin = require('copy-webpack-plugin');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. // Generates a path to the output bundle to be loaded in the browser.
  5. const getOutputPath = (app, folder, filename) => {
  6. const exceptions = {
  7. 'documents': 'wagtaildocs',
  8. 'contrib/table_block': 'table_block',
  9. 'contrib/typed_table_block': 'typed_table_block',
  10. 'contrib/styleguide': 'wagtailstyleguide',
  11. };
  12. const appLabel = exceptions[app] || `wagtail${app}`;
  13. return path.join('wagtail', app, 'static', appLabel, folder, filename);
  14. };
  15. // Mapping from package name to exposed global variable.
  16. const exposedDependencies = {
  17. 'focus-trap-react': 'FocusTrapReact',
  18. 'react': 'React',
  19. 'react-dom': 'ReactDOM',
  20. 'react-transition-group/CSSTransitionGroup': 'CSSTransitionGroup',
  21. 'draft-js': 'DraftJS',
  22. };
  23. module.exports = function exports(env, argv) {
  24. const isProduction = argv.mode === 'production';
  25. const entrypoints = {
  26. 'admin': [
  27. 'chooser-modal',
  28. 'chooser-widget',
  29. 'chooser-widget-telepath',
  30. 'comments',
  31. 'core',
  32. 'date-time-chooser',
  33. 'draftail',
  34. 'filtered-select',
  35. 'icons',
  36. 'modal-workflow',
  37. 'page-chooser-modal',
  38. 'page-chooser',
  39. 'page-chooser-telepath',
  40. 'privacy-switch',
  41. 'sidebar',
  42. 'task-chooser-modal',
  43. 'task-chooser',
  44. 'telepath/blocks',
  45. 'telepath/telepath',
  46. 'telepath/widgets',
  47. 'userbar',
  48. 'wagtailadmin',
  49. 'workflow-action',
  50. 'bulk-actions',
  51. ],
  52. 'images': [
  53. 'image-chooser',
  54. 'image-chooser-modal',
  55. 'image-chooser-telepath',
  56. 'image-block',
  57. ],
  58. 'documents': [
  59. 'document-chooser',
  60. 'document-chooser-modal',
  61. 'document-chooser-telepath',
  62. ],
  63. 'snippets': ['snippet-chooser', 'snippet-chooser-telepath'],
  64. 'contrib/table_block': ['table'],
  65. 'contrib/typed_table_block': ['typed_table_block'],
  66. };
  67. const entry = {};
  68. // eslint-disable-next-line no-restricted-syntax
  69. for (const [appName, moduleNames] of Object.entries(entrypoints)) {
  70. moduleNames.forEach((moduleName) => {
  71. entry[moduleName] = {
  72. import: [`./client/src/entrypoints/${appName}/${moduleName}.js`],
  73. filename: getOutputPath(appName, 'js', moduleName) + '.js',
  74. };
  75. });
  76. }
  77. const sassEntry = {};
  78. sassEntry[getOutputPath('admin', 'css', 'core')] = path.resolve(
  79. 'wagtail',
  80. 'admin',
  81. 'static_src',
  82. 'wagtailadmin',
  83. 'scss',
  84. 'core.scss',
  85. );
  86. sassEntry[getOutputPath('admin', 'css', 'panels/draftail')] = path.resolve(
  87. 'wagtail',
  88. 'admin',
  89. 'static_src',
  90. 'wagtailadmin',
  91. 'scss',
  92. 'panels',
  93. 'draftail.scss',
  94. );
  95. sassEntry[getOutputPath('admin', 'css', 'panels/streamfield')] = path.resolve(
  96. 'wagtail',
  97. 'admin',
  98. 'static_src',
  99. 'wagtailadmin',
  100. 'scss',
  101. 'panels',
  102. 'streamfield.scss',
  103. );
  104. sassEntry[
  105. getOutputPath('contrib/typed_table_block', 'css', 'typed_table_block')
  106. ] = path.resolve(
  107. 'wagtail',
  108. 'contrib',
  109. 'typed_table_block',
  110. 'static_src',
  111. 'typed_table_block',
  112. 'scss',
  113. 'typed_table_block.scss',
  114. );
  115. return {
  116. entry: {
  117. ...entry,
  118. ...sassEntry,
  119. },
  120. output: {
  121. path: path.resolve('.'),
  122. publicPath: '/static/',
  123. },
  124. resolve: {
  125. extensions: ['.ts', '.tsx', '.js'],
  126. // Some libraries import Node modules but don't use them in the browser.
  127. // Tell Webpack to provide empty mocks for them so importing them works.
  128. fallback: {
  129. fs: false,
  130. net: false,
  131. tls: false,
  132. },
  133. },
  134. externals: {
  135. jquery: 'jQuery',
  136. },
  137. plugins: [
  138. new MiniCssExtractPlugin({
  139. filename: '[name].css',
  140. }),
  141. new CopyPlugin({
  142. patterns: [
  143. {
  144. from: 'wagtail/admin/static_src/',
  145. to: 'wagtail/admin/static/',
  146. globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] },
  147. },
  148. {
  149. from: 'wagtail/documents/static_src/',
  150. to: 'wagtail/documents/static/',
  151. globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] },
  152. },
  153. {
  154. from: 'wagtail/embeds/static_src/',
  155. to: 'wagtail/embeds/static/',
  156. globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] },
  157. },
  158. {
  159. from: 'wagtail/images/static_src/',
  160. to: 'wagtail/images/static/',
  161. globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] },
  162. },
  163. {
  164. from: 'wagtail/contrib/search_promotions/static_src/',
  165. to: 'wagtail/contrib/search_promotions/static/',
  166. globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] },
  167. },
  168. ],
  169. }),
  170. ],
  171. module: {
  172. rules: [
  173. {
  174. test: /\.(js|ts)x?$/,
  175. loader: 'ts-loader',
  176. exclude: /node_modules/,
  177. },
  178. {
  179. test: /\.(svg)$/i,
  180. type: 'asset/inline',
  181. },
  182. {
  183. test: /\.(scss|css)$/,
  184. use: [
  185. MiniCssExtractPlugin.loader,
  186. {
  187. loader: 'css-loader',
  188. options: {
  189. url: false,
  190. },
  191. },
  192. {
  193. loader: 'postcss-loader',
  194. options: {
  195. postcssOptions: {
  196. plugins: ['tailwindcss', 'autoprefixer', 'cssnano'],
  197. },
  198. },
  199. },
  200. {
  201. loader: 'sass-loader',
  202. options: {
  203. sassOptions: {
  204. // Manually set Sass output so it’s identical in production and development. See:
  205. // https://github.com/tailwindlabs/tailwindcss/issues/11027
  206. // https://github.com/webpack-contrib/sass-loader/issues/1129
  207. style: 'expanded',
  208. },
  209. },
  210. },
  211. ],
  212. },
  213. ].concat(
  214. Object.keys(exposedDependencies).map((name) => {
  215. const globalName = exposedDependencies[name];
  216. // Create expose-loader configs for each Wagtail dependency.
  217. return {
  218. test: require.resolve(name),
  219. use: [
  220. {
  221. loader: 'expose-loader',
  222. options: {
  223. exposes: {
  224. globalName,
  225. override: true,
  226. },
  227. },
  228. },
  229. ],
  230. };
  231. }),
  232. ),
  233. },
  234. optimization: {
  235. splitChunks: {
  236. cacheGroups: {
  237. vendor: {
  238. name: getOutputPath('admin', 'js', 'vendor'),
  239. chunks: 'initial',
  240. minChunks: 2,
  241. reuseExistingChunk: true,
  242. },
  243. },
  244. },
  245. },
  246. // See https://webpack.js.org/configuration/devtool/.
  247. devtool: isProduction ? false : 'eval-cheap-module-source-map',
  248. // For development mode only.
  249. watchOptions: {
  250. poll: 1000,
  251. aggregateTimeout: 300,
  252. },
  253. // Disable performance hints – currently there are much more valuable
  254. // optimizations for us to do outside of Webpack
  255. performance: {
  256. hints: false,
  257. },
  258. stats: {
  259. // Add chunk information (setting this to `false` allows for a less verbose output)
  260. chunks: false,
  261. // Add the hash of the compilation
  262. hash: false,
  263. // `webpack --colors` equivalent
  264. colors: true,
  265. // Add information about the reasons why modules are included
  266. reasons: false,
  267. // Add webpack version information
  268. version: false,
  269. },
  270. };
  271. };