You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

592 lines
15 KiB

преди 4 години
преди 3 години
преди 3 години
преди 4 години
преди 5 години
преди 3 години
преди 4 години
преди 3 години
преди 4 години
преди 4 години
преди 4 години
преди 3 години
преди 4 години
преди 4 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 2 години
преди 5 години
преди 5 години
преди 5 години
преди 5 години
преди 5 години
преди 4 години
преди 5 години
преди 5 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 3 години
преди 3 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 5 години
преди 4 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 4 години
преди 4 години
преди 4 години
преди 4 години
преди 5 години
преди 4 години
преди 4 години
преди 3 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 5 години
преди 4 години
преди 5 години
преди 4 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 5 години
преди 3 години
преди 5 години
преди 4 години
преди 5 години
преди 4 години
преди 5 години
преди 4 години
преди 5 години
преди 4 години
преди 5 години
преди 5 години
преди 5 години
преди 3 години
преди 3 години
преди 3 години
  1. //@ts-check
  2. /** @typedef {import('webpack').Configuration} WebpackConfig **/
  3. /* eslint-disable @typescript-eslint/ban-ts-comment */
  4. /* eslint-disable @typescript-eslint/no-var-requires */
  5. /* eslint-disable @typescript-eslint/strict-boolean-expressions */
  6. /* eslint-disable @typescript-eslint/prefer-optional-chain */
  7. const { spawnSync } = require('child_process');
  8. const path = require('path');
  9. const CircularDependencyPlugin = require('circular-dependency-plugin');
  10. const { CleanWebpackPlugin: CleanPlugin } = require('clean-webpack-plugin');
  11. const CopyPlugin = require('copy-webpack-plugin');
  12. const CspHtmlPlugin = require('csp-html-webpack-plugin');
  13. const esbuild = require('esbuild');
  14. const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
  15. const HtmlPlugin = require('html-webpack-plugin');
  16. const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
  17. const JSON5 = require('json5');
  18. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  19. const TerserPlugin = require('terser-webpack-plugin');
  20. const { WebpackError } = require('webpack');
  21. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  22. module.exports =
  23. /**
  24. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  25. * @param {{ mode: 'production' | 'development' | 'none' | undefined }} argv
  26. * @returns { WebpackConfig[] }
  27. */
  28. function (env, argv) {
  29. const mode = argv.mode || 'none';
  30. env = {
  31. analyzeBundle: false,
  32. analyzeDeps: false,
  33. esbuild: true,
  34. squoosh: true,
  35. ...env,
  36. };
  37. return [
  38. getExtensionConfig('node', mode, env),
  39. getExtensionConfig('webworker', mode, env),
  40. getWebviewsConfig(mode, env),
  41. ];
  42. };
  43. /**
  44. * @param { 'node' | 'webworker' } target
  45. * @param { 'production' | 'development' | 'none' } mode
  46. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  47. * @returns { WebpackConfig }
  48. */
  49. function getExtensionConfig(target, mode, env) {
  50. /**
  51. * @type WebpackConfig['plugins'] | any
  52. */
  53. const plugins = [
  54. new CleanPlugin({ cleanOnceBeforeBuildPatterns: ['!webviews/**'] }),
  55. new ForkTsCheckerPlugin({
  56. async: false,
  57. eslint: {
  58. enabled: true,
  59. files: 'src/**/*.ts',
  60. options: {
  61. // cache: true,
  62. // cacheLocation: path.join(
  63. // __dirname,
  64. // target === 'webworker' ? '.eslintcache.browser' : '.eslintcache',
  65. // ),
  66. overrideConfigFile: path.join(
  67. __dirname,
  68. target === 'webworker' ? '.eslintrc.browser.json' : '.eslintrc.json',
  69. ),
  70. },
  71. },
  72. formatter: 'basic',
  73. typescript: {
  74. configFile: path.join(__dirname, target === 'webworker' ? 'tsconfig.browser.json' : 'tsconfig.json'),
  75. },
  76. }),
  77. ];
  78. if (env.analyzeDeps) {
  79. plugins.push(
  80. new CircularDependencyPlugin({
  81. cwd: __dirname,
  82. exclude: /node_modules/,
  83. failOnError: false,
  84. onDetected: function ({ module: _webpackModuleRecord, paths, compilation }) {
  85. if (paths.some(p => p.includes('container.ts'))) return;
  86. // @ts-ignore
  87. compilation.warnings.push(new WebpackError(paths.join(' -> ')));
  88. },
  89. }),
  90. );
  91. }
  92. if (env.analyzeBundle) {
  93. plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 'auto' }));
  94. }
  95. return {
  96. name: `extension:${target}`,
  97. entry: {
  98. extension: './src/extension.ts',
  99. },
  100. mode: mode,
  101. target: target,
  102. devtool: 'source-map',
  103. output: {
  104. path: target === 'webworker' ? path.join(__dirname, 'dist', 'browser') : path.join(__dirname, 'dist'),
  105. libraryTarget: 'commonjs2',
  106. filename: 'gitlens.js',
  107. chunkFilename: 'feature-[name].js',
  108. },
  109. optimization: {
  110. minimizer: [
  111. new TerserPlugin(
  112. env.esbuild
  113. ? {
  114. minify: TerserPlugin.esbuildMinify,
  115. terserOptions: {
  116. // @ts-ignore
  117. drop: ['debugger'],
  118. format: 'cjs',
  119. minify: true,
  120. treeShaking: true,
  121. // Keep the class names otherwise @log won't provide a useful name
  122. keepNames: true,
  123. target: 'es2020',
  124. },
  125. }
  126. : {
  127. compress: {
  128. drop_debugger: true,
  129. },
  130. extractComments: false,
  131. parallel: true,
  132. terserOptions: {
  133. ecma: 2020,
  134. // Keep the class names otherwise @log won't provide a useful name
  135. keep_classnames: true,
  136. module: true,
  137. },
  138. },
  139. ),
  140. ],
  141. splitChunks:
  142. target === 'webworker'
  143. ? false
  144. : {
  145. // Disable all non-async code splitting
  146. chunks: () => false,
  147. cacheGroups: {
  148. default: false,
  149. vendors: false,
  150. },
  151. },
  152. },
  153. externals: {
  154. vscode: 'commonjs vscode',
  155. },
  156. module: {
  157. rules: [
  158. {
  159. exclude: /\.d\.ts$/,
  160. include: path.join(__dirname, 'src'),
  161. test: /\.tsx?$/,
  162. use: env.esbuild
  163. ? {
  164. loader: 'esbuild-loader',
  165. options: {
  166. implementation: esbuild,
  167. loader: 'ts',
  168. target: ['es2020', 'chrome91', 'node14.16'],
  169. tsconfigRaw: resolveTSConfig(
  170. path.join(
  171. __dirname,
  172. target === 'webworker' ? 'tsconfig.browser.json' : 'tsconfig.json',
  173. ),
  174. ),
  175. },
  176. }
  177. : {
  178. loader: 'ts-loader',
  179. options: {
  180. configFile: path.join(
  181. __dirname,
  182. target === 'webworker' ? 'tsconfig.browser.json' : 'tsconfig.json',
  183. ),
  184. experimentalWatchApi: true,
  185. transpileOnly: true,
  186. },
  187. },
  188. },
  189. ],
  190. },
  191. resolve: {
  192. alias: {
  193. '@env': path.resolve(__dirname, 'src', 'env', target === 'webworker' ? 'browser' : target),
  194. // This dependency is very large, and isn't needed for our use-case
  195. tr46: path.resolve(__dirname, 'patches', 'tr46.js'),
  196. },
  197. fallback: target === 'webworker' ? { path: require.resolve('path-browserify') } : undefined,
  198. mainFields: target === 'webworker' ? ['browser', 'module', 'main'] : ['module', 'main'],
  199. extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  200. },
  201. plugins: plugins,
  202. infrastructureLogging: {
  203. level: 'log', // enables logging required for problem matchers
  204. },
  205. stats: {
  206. preset: 'errors-warnings',
  207. assets: true,
  208. colors: true,
  209. env: true,
  210. errorsCount: true,
  211. warningsCount: true,
  212. timings: true,
  213. },
  214. };
  215. }
  216. /**
  217. * @param { 'production' | 'development' | 'none' } mode
  218. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  219. * @returns { WebpackConfig }
  220. */
  221. function getWebviewsConfig(mode, env) {
  222. const basePath = path.join(__dirname, 'src', 'webviews', 'apps');
  223. /** @type WebpackConfig['plugins'] | any */
  224. const plugins = [
  225. new CleanPlugin(
  226. mode === 'production'
  227. ? {
  228. cleanOnceBeforeBuildPatterns: [
  229. path.posix.join(__dirname.replace(/\\/g, '/'), 'images', 'settings', '**'),
  230. ],
  231. dangerouslyAllowCleanPatternsOutsideProject: true,
  232. dry: false,
  233. }
  234. : undefined,
  235. ),
  236. new ForkTsCheckerPlugin({
  237. async: false,
  238. eslint: {
  239. enabled: true,
  240. files: path.join(basePath, '**', '*.ts'),
  241. // options: { cache: true },
  242. },
  243. formatter: 'basic',
  244. typescript: {
  245. configFile: path.join(basePath, 'tsconfig.json'),
  246. },
  247. }),
  248. new MiniCssExtractPlugin({ filename: '[name].css' }),
  249. getHtmlPlugin('rebase', false, mode, env),
  250. getHtmlPlugin('settings', false, mode, env),
  251. getHtmlPlugin('welcome', false, mode, env),
  252. getCspHtmlPlugin(mode, env),
  253. new InlineChunkHtmlPlugin(HtmlPlugin, mode === 'production' ? ['\\.css$'] : []),
  254. new CopyPlugin({
  255. patterns: [
  256. {
  257. from: path.posix.join(basePath.replace(/\\/g, '/'), 'images', 'settings', '*.png'),
  258. to: __dirname.replace(/\\/g, '/'),
  259. },
  260. {
  261. from: path.posix.join(
  262. __dirname.replace(/\\/g, '/'),
  263. 'node_modules',
  264. '@vscode',
  265. 'codicons',
  266. 'dist',
  267. 'codicon.ttf',
  268. ),
  269. to: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'webviews'),
  270. },
  271. ],
  272. }),
  273. ];
  274. const imageGeneratorConfig = getImageMinimizerConfig(mode, env);
  275. if (mode !== 'production') {
  276. plugins.push(
  277. new ImageMinimizerPlugin({
  278. deleteOriginalAssets: true,
  279. generator: [imageGeneratorConfig],
  280. }),
  281. );
  282. }
  283. return {
  284. name: 'webviews',
  285. context: basePath,
  286. entry: {
  287. rebase: './rebase/rebase.ts',
  288. settings: './settings/settings.ts',
  289. welcome: './welcome/welcome.ts',
  290. },
  291. mode: mode,
  292. target: 'web',
  293. devtool: 'source-map',
  294. output: {
  295. filename: '[name].js',
  296. path: path.join(__dirname, 'dist', 'webviews'),
  297. publicPath: '#{root}/dist/webviews/',
  298. },
  299. optimization: {
  300. minimizer: [
  301. new TerserPlugin(
  302. env.esbuild
  303. ? {
  304. minify: TerserPlugin.esbuildMinify,
  305. terserOptions: {
  306. // @ts-ignore
  307. drop: ['debugger', 'console'],
  308. // @ts-ignore
  309. format: 'esm',
  310. minify: true,
  311. treeShaking: true,
  312. // // Keep the class names otherwise @log won't provide a useful name
  313. // keepNames: true,
  314. target: 'es2020',
  315. },
  316. }
  317. : {
  318. compress: {
  319. drop_debugger: true,
  320. drop_console: true,
  321. },
  322. extractComments: false,
  323. parallel: true,
  324. // @ts-ignore
  325. terserOptions: {
  326. ecma: 2020,
  327. // // Keep the class names otherwise @log won't provide a useful name
  328. // keep_classnames: true,
  329. module: true,
  330. },
  331. },
  332. ),
  333. new ImageMinimizerPlugin({
  334. deleteOriginalAssets: true,
  335. generator: [imageGeneratorConfig],
  336. }),
  337. ],
  338. },
  339. module: {
  340. rules: [
  341. {
  342. exclude: /\.d\.ts$/,
  343. include: path.join(__dirname, 'src'),
  344. test: /\.tsx?$/,
  345. use: env.esbuild
  346. ? {
  347. loader: 'esbuild-loader',
  348. options: {
  349. implementation: esbuild,
  350. loader: 'ts',
  351. target: 'es2020',
  352. tsconfigRaw: resolveTSConfig(path.join(basePath, 'tsconfig.json')),
  353. },
  354. }
  355. : {
  356. loader: 'ts-loader',
  357. options: {
  358. configFile: path.join(basePath, 'tsconfig.json'),
  359. experimentalWatchApi: true,
  360. transpileOnly: true,
  361. },
  362. },
  363. },
  364. {
  365. test: /\.scss$/,
  366. use: [
  367. {
  368. loader: MiniCssExtractPlugin.loader,
  369. },
  370. {
  371. loader: 'css-loader',
  372. options: {
  373. sourceMap: true,
  374. url: false,
  375. },
  376. },
  377. {
  378. loader: 'sass-loader',
  379. options: {
  380. sourceMap: true,
  381. },
  382. },
  383. ],
  384. exclude: /node_modules/,
  385. },
  386. ],
  387. },
  388. resolve: {
  389. extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  390. modules: [basePath, 'node_modules'],
  391. },
  392. plugins: plugins,
  393. infrastructureLogging: {
  394. level: 'log', // enables logging required for problem matchers
  395. },
  396. stats: {
  397. preset: 'errors-warnings',
  398. assets: true,
  399. colors: true,
  400. env: true,
  401. errorsCount: true,
  402. warningsCount: true,
  403. timings: true,
  404. },
  405. };
  406. }
  407. /**
  408. * @param { 'production' | 'development' | 'none' } mode
  409. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  410. * @returns { CspHtmlPlugin }
  411. */
  412. function getCspHtmlPlugin(mode, env) {
  413. const cspPlugin = new CspHtmlPlugin(
  414. {
  415. 'default-src': "'none'",
  416. 'img-src': ['#{cspSource}', 'https:', 'data:'],
  417. 'script-src':
  418. mode !== 'production'
  419. ? ['#{cspSource}', "'nonce-#{cspNonce}'", "'unsafe-eval'"]
  420. : ['#{cspSource}', "'nonce-#{cspNonce}'"],
  421. 'style-src': ['#{cspSource}', "'nonce-#{cspNonce}'"],
  422. 'font-src': ['#{cspSource}'],
  423. },
  424. {
  425. enabled: true,
  426. hashingMethod: 'sha256',
  427. hashEnabled: {
  428. 'script-src': true,
  429. 'style-src': true,
  430. },
  431. nonceEnabled: {
  432. 'script-src': true,
  433. 'style-src': true,
  434. },
  435. },
  436. );
  437. // Override the nonce creation so we can dynamically generate them at runtime
  438. // @ts-ignore
  439. cspPlugin.createNonce = () => '#{cspNonce}';
  440. return cspPlugin;
  441. }
  442. /**
  443. * @param { 'production' | 'development' | 'none' } mode
  444. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  445. * @returns { ImageMinimizerPlugin.Generator<any> }
  446. */
  447. function getImageMinimizerConfig(mode, env) {
  448. /** @type ImageMinimizerPlugin.Generator<any> */
  449. // @ts-ignore
  450. return env.squoosh
  451. ? {
  452. type: 'asset',
  453. implementation: ImageMinimizerPlugin.squooshGenerate,
  454. options: {
  455. encodeOptions: {
  456. webp: {
  457. // quality: 90,
  458. lossless: 1,
  459. },
  460. },
  461. },
  462. }
  463. : {
  464. type: 'asset',
  465. implementation: ImageMinimizerPlugin.imageminGenerate,
  466. options: {
  467. plugins: [
  468. [
  469. 'imagemin-webp',
  470. {
  471. lossless: true,
  472. nearLossless: 0,
  473. quality: 100,
  474. method: mode === 'production' ? 4 : 0,
  475. },
  476. ],
  477. ],
  478. },
  479. };
  480. }
  481. /**
  482. * @param { string } name
  483. * @param { boolean } premium
  484. * @param { 'production' | 'development' | 'none' } mode
  485. * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; esbuild?: boolean; squoosh?: boolean } | undefined } env
  486. * @returns { HtmlPlugin }
  487. */
  488. function getHtmlPlugin(name, premium, mode, env) {
  489. return new HtmlPlugin({
  490. template: premium ? path.join('premium', name, `${name}.html`) : path.join(name, `${name}.html`),
  491. chunks: [name],
  492. filename: path.join(__dirname, 'dist', 'webviews', `${name}.html`),
  493. inject: true,
  494. inlineSource: mode === 'production' ? '.css$' : undefined,
  495. minify:
  496. mode === 'production'
  497. ? {
  498. removeComments: true,
  499. collapseWhitespace: true,
  500. removeRedundantAttributes: false,
  501. useShortDoctype: true,
  502. removeEmptyAttributes: true,
  503. removeStyleLinkTypeAttributes: true,
  504. keepClosingSlash: true,
  505. minifyCSS: true,
  506. }
  507. : false,
  508. });
  509. }
  510. class InlineChunkHtmlPlugin {
  511. constructor(htmlPlugin, patterns) {
  512. this.htmlPlugin = htmlPlugin;
  513. this.patterns = patterns;
  514. }
  515. getInlinedTag(publicPath, assets, tag) {
  516. if (
  517. (tag.tagName !== 'script' || !(tag.attributes && tag.attributes.src)) &&
  518. (tag.tagName !== 'link' || !(tag.attributes && tag.attributes.href))
  519. ) {
  520. return tag;
  521. }
  522. let chunkName = tag.tagName === 'link' ? tag.attributes.href : tag.attributes.src;
  523. if (publicPath) {
  524. chunkName = chunkName.replace(publicPath, '');
  525. }
  526. if (!this.patterns.some(pattern => chunkName.match(pattern))) {
  527. return tag;
  528. }
  529. const asset = assets[chunkName];
  530. if (asset == null) {
  531. return tag;
  532. }
  533. return { tagName: tag.tagName === 'link' ? 'style' : tag.tagName, innerHTML: asset.source(), closeTag: true };
  534. }
  535. apply(compiler) {
  536. let publicPath = compiler.options.output.publicPath || '';
  537. if (publicPath && !publicPath.endsWith('/')) {
  538. publicPath += '/';
  539. }
  540. compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
  541. const getInlinedTagFn = tag => this.getInlinedTag(publicPath, compilation.assets, tag);
  542. this.htmlPlugin.getHooks(compilation).alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {
  543. assets.headTags = assets.headTags.map(getInlinedTagFn);
  544. assets.bodyTags = assets.bodyTags.map(getInlinedTagFn);
  545. });
  546. });
  547. }
  548. }
  549. /**
  550. * @param { string } configFile
  551. * @returns { string }
  552. */
  553. function resolveTSConfig(configFile) {
  554. const result = spawnSync('yarn', ['tsc', `-p ${configFile}`, '--showConfig'], {
  555. cwd: __dirname,
  556. encoding: 'utf8',
  557. shell: true,
  558. });
  559. const data = result.stdout;
  560. const start = data.indexOf('{');
  561. const end = data.lastIndexOf('}') + 1;
  562. const json = JSON5.parse(data.substring(start, end));
  563. return json;
  564. }