github.com/grafana/pyroscope@v1.18.0/scripts/webpack/webpack.common.js (about)

     1  const CopyWebpackPlugin = require('copy-webpack-plugin');
     2  
     3  const path = require('path');
     4  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     5  
     6  module.exports = {
     7    target: 'web',
     8    entry: {
     9      app: './public/app/app.tsx',
    10    },
    11    output: {
    12      clean: true,
    13      path: path.resolve(__dirname, '../../public/build'),
    14      filename: '[name].[contenthash].js',
    15      publicPath: '',
    16    },
    17    resolve: {
    18      extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg', '.ttf'],
    19      modules: ['node_modules', path.resolve('public')],
    20  
    21      // TODO: unify with tsconfig.json
    22      // When using TsconfigPathsPlugin, paths overrides don't work
    23      // For example, setting a) '@webapp/*' and  b) '@webapp/components/ExportData'
    24      // Would end up ignoring b)
    25      alias: {
    26        '@pyroscope': path.resolve(__dirname, '../../public/app'),
    27        // some sub-dependencies use a different version of @emotion/react and generate warnings
    28        // in the browser about @emotion/react loaded twice. We want to only load it once
    29        '@emotion/react': require.resolve('@emotion/react'),
    30        // Dependencies
    31        //...deps,
    32      },
    33      plugins: [
    34        // Use same alias from tsconfig.json
    35        //      new TsconfigPathsPlugin({
    36        //        logLevel: 'info',
    37        //        // TODO: figure out why it could not use the baseUrl from tsconfig.json
    38        //        baseUrl: path.resolve(__dirname, '../../'),
    39        //      }),
    40      ],
    41    },
    42    ignoreWarnings: [/export .* was not found in/],
    43    stats: {
    44      children: false,
    45      source: false,
    46    },
    47    plugins: [
    48      new MiniCssExtractPlugin({
    49        filename: '[name].[contenthash].css',
    50      }),
    51      new CopyWebpackPlugin({
    52        patterns: [
    53          {
    54            from: 'node_modules/@grafana/ui/dist/public/img/icons',
    55            to: 'grafana/img/icons/',
    56          },
    57        ],
    58      }),
    59    ],
    60    module: {
    61      rules: [
    62        // CSS
    63        {
    64          test: /\.(css|scss)$/,
    65          use: [
    66            MiniCssExtractPlugin.loader,
    67            {
    68              loader: 'css-loader',
    69              options: {
    70                importLoaders: 2,
    71                url: true,
    72              },
    73            },
    74            {
    75              loader: 'sass-loader',
    76              options: {},
    77            },
    78          ],
    79        },
    80  
    81        {
    82          test: require.resolve('jquery'),
    83          loader: 'expose-loader',
    84          options: {
    85            exposes: ['$', 'jQuery'],
    86          },
    87        },
    88        {
    89          test: /\.(js|ts)x?$/,
    90          // Ignore everything except pyroscope-oss, since it's used as if it was local code
    91          // exclude: /node_modules\/(?!pyroscope-oss).*/,
    92          use: [
    93            {
    94              loader: 'esbuild-loader',
    95              options: {
    96                loader: 'tsx',
    97                target: 'es2015',
    98              },
    99            },
   100          ],
   101        },
   102  
   103        // SVG
   104        {
   105          test: /\.svg$/,
   106          use: [
   107            {
   108              loader: 'react-svg-loader',
   109              options: {
   110                svgo: {
   111                  plugins: [
   112                    { convertPathData: { noSpaceAfterFlags: false } },
   113                    { removeViewBox: false },
   114                  ],
   115                },
   116              },
   117            },
   118          ],
   119        },
   120        {
   121          test: /\.ttf$/,
   122          type: 'asset/resource',
   123        },
   124      ],
   125    },
   126  };