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

     1  // @ts-nocheck
     2  import HtmlWebpackPlugin from 'html-webpack-plugin';
     3  import InlineChunkHtmlPlugin from 'react-dev-utils/InlineChunkHtmlPlugin';
     4  import HTMLInlineCSSWebpackPlugin from 'html-inline-css-webpack-plugin';
     5  import path from 'path';
     6  import MiniCssExtractPlugin from 'mini-css-extract-plugin';
     7  import { getAlias, getJsLoader, getStyleLoaders } from './shared';
     8  
     9  const packagePath = path.resolve(__dirname, '../../webapp');
    10  
    11  // Creates a file in webapp/public/standalone.html
    12  // With js+css+svg embed into the html
    13  const config = (env, options) => {
    14    let livereload = [];
    15  
    16    // conditionally use require
    17    // so that in CI when building for production don't have to pull it
    18    if (options.watch) {
    19      // eslint-disable-next-line global-require
    20      const LiveReloadPlugin = require('webpack-livereload-plugin');
    21      livereload = [
    22        new LiveReloadPlugin({
    23          // most likely the default port is used by the main webapp
    24          port: 35730,
    25          appendScriptTag: true,
    26        }),
    27      ];
    28    }
    29  
    30    return {
    31      // We will always run in production mode, even when developing locally
    32      // reason is that we rely on things like ModuleConcatenation, TerserPlugin etc
    33      mode: 'production',
    34      //  devtool: 'eval-source-map',
    35      entry: {
    36        app: path.join(packagePath, './javascript/standalone.tsx'),
    37        styles: path.join(packagePath, './sass/standalone.scss'),
    38      },
    39  
    40      optimization: {
    41        mangleExports: false,
    42        //      minimize: false,
    43      },
    44  
    45      output: {
    46        publicPath: '',
    47        // Emit to another directory other than webapp/public/assets to not have any conflicts
    48        path: path.resolve(__dirname, '../../dist/standalone'),
    49        filename: '[name].js',
    50        clean: true,
    51      },
    52      module: {
    53        // Note: order is bottom-to-top and/or right-to-left
    54        rules: [
    55          ...getJsLoader(),
    56          ...getStyleLoaders(),
    57          {
    58            test: /\.svg/,
    59            use: {
    60              loader: 'svg-url-loader',
    61            },
    62          },
    63        ],
    64      },
    65      resolve: {
    66        extensions: ['.ts', '.tsx', '.js', '.jsx', '.svg'],
    67        alias: getAlias(),
    68        modules: [
    69          path.resolve(packagePath),
    70          path.resolve(path.join(__dirname, '../../node_modules')),
    71          path.resolve('node_modules'),
    72        ],
    73      },
    74      plugins: [
    75        new MiniCssExtractPlugin({
    76          filename: '[name].[hash].css',
    77        }),
    78        new HtmlWebpackPlugin({
    79          minify: {
    80            // We need to keep the comments since go will use a comment
    81            // to know what to replace for the flamegraph
    82            removeComments: false,
    83          },
    84          filename: path.resolve(packagePath, `public/standalone.html`),
    85          template: path.resolve(packagePath, `templates/standalone.html`),
    86        }),
    87        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]),
    88        new HTMLInlineCSSWebpackPlugin(),
    89  
    90        ...livereload,
    91      ],
    92    };
    93  };
    94  
    95  export default config;