github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/scripts/webpack/webpack.common.ts (about)

     1  // @ts-nocheck
     2  import webpack from 'webpack';
     3  import path from 'path';
     4  import glob from 'glob';
     5  import fs from 'fs';
     6  import HtmlWebpackPlugin from 'html-webpack-plugin';
     7  import MiniCssExtractPlugin from 'mini-css-extract-plugin';
     8  import CopyPlugin from 'copy-webpack-plugin';
     9  import { ESBuildMinifyPlugin } from 'esbuild-loader';
    10  
    11  import { getAlias, getJsLoader, getStyleLoaders } from './shared';
    12  
    13  const packagePath = path.resolve(__dirname, '../../webapp');
    14  const rootPath = path.resolve(__dirname, '../../');
    15  
    16  // use a fake hash when running locally
    17  const LOCAL_HASH = 'local';
    18  
    19  function getFilename(ext: string) {
    20    // We may want to produce no hash, example when running size-limit
    21    if (process.env.NOHASH) {
    22      return `[name].${ext}`;
    23    }
    24  
    25    if (process.env.NODE_ENV === 'production') {
    26      return `[name].[hash].${ext}`;
    27    }
    28  
    29    // TODO: there's some cache busting issue when running locally
    30    return `[name].${LOCAL_HASH}.${ext}`;
    31  }
    32  
    33  const pages = glob
    34    .sync(path.join(__dirname, '../../webapp/templates/!(standalone).html'))
    35    .map((x) => path.basename(x));
    36  
    37  const pagePlugins = pages.map(
    38    (name) =>
    39      new HtmlWebpackPlugin({
    40        filename: path.resolve(packagePath, `public/${name}`),
    41        template: path.resolve(packagePath, `templates/${name}`),
    42        inject: false,
    43        templateParameters: (compilation) => {
    44          // TODO:
    45          // ideally we should access via argv
    46          // https://webpack.js.org/configuration/mode/
    47          const hash =
    48            process.env.NODE_ENV === 'production'
    49              ? compilation.getStats().toJson().hash
    50              : LOCAL_HASH;
    51  
    52          return {
    53            extra_metadata: process.env.EXTRA_METADATA
    54              ? fs.readFileSync(process.env.EXTRA_METADATA)
    55              : '',
    56            mode: process.env.NODE_ENV,
    57            webpack: {
    58              hash,
    59            },
    60          };
    61        },
    62      })
    63  );
    64  
    65  export default {
    66    target: 'web',
    67  
    68    entry: {
    69      app: path.join(packagePath, 'javascript/index.tsx'),
    70      styles: path.join(packagePath, 'sass/profile.scss'),
    71    },
    72  
    73    output: {
    74      publicPath: '',
    75      path: path.resolve(packagePath, 'public/assets'),
    76  
    77      // https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
    78      filename: getFilename('js'),
    79      clean: true,
    80    },
    81  
    82    resolve: {
    83      extensions: ['.ts', '.tsx', '.es6', '.js', '.jsx', '.json', '.svg'],
    84      alias: getAlias(),
    85    },
    86  
    87    stats: {
    88      children: false,
    89      warningsFilter: /export .* was not found in/,
    90      source: false,
    91    },
    92  
    93    watchOptions: {
    94      ignored: /node_modules/,
    95    },
    96  
    97    optimization: {
    98      minimizer: [
    99        new ESBuildMinifyPlugin({
   100          target: 'es2015',
   101          css: true,
   102        }),
   103      ],
   104    },
   105  
   106    module: {
   107      // Note: order is bottom-to-top and/or right-to-left
   108      rules: [
   109        ...getJsLoader(),
   110        ...getStyleLoaders(),
   111        {
   112          test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
   113          loader: 'file-loader',
   114  
   115          // We output files to assets/static/img, where /assets comes from webpack's output dir
   116          // However, we still need to prefix the public URL with /assets/static/img
   117          options: {
   118            outputPath: 'static/img',
   119            // using relative path to make this work when pyroscope is deployed to a subpath (with BaseURL config option)
   120            publicPath: '../assets/static/img',
   121            name: '[name].[hash:8].[ext]',
   122          },
   123        },
   124  
   125        // for SVG used via react
   126        // we simply inline them as if they were normal react components
   127        {
   128          test: /\.svg$/,
   129          issuer: /\.(j|t)sx?$/,
   130          use: [
   131            { loader: 'babel-loader' },
   132            {
   133              loader: 'react-svg-loader',
   134              options: {
   135                svgo: {
   136                  plugins: [
   137                    { convertPathData: { noSpaceAfterFlags: false } },
   138                    { removeViewBox: false },
   139                  ],
   140                },
   141              },
   142            },
   143          ],
   144        },
   145      ],
   146    },
   147  
   148    plugins: [
   149      // uncomment if you want to see the webpack bundle analysis
   150      // new BundleAnalyzerPlugin(),
   151      ...pagePlugins,
   152      new MiniCssExtractPlugin({
   153        filename: getFilename('css'),
   154      }),
   155      new CopyPlugin({
   156        patterns: [
   157          {
   158            from: path.join(packagePath, 'images'),
   159            to: 'images',
   160          },
   161        ],
   162      }),
   163    ],
   164  };