{"size": 2951, "ext": "js", "max_stars_repo_path": "identity/webapp/webpack.frontend.js", "max_stars_repo_name": "saltaf07/Public-Scripts", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "identity/webapp/webpack.frontend.js", "max_issues_repo_name": "saltaf07/Public-Scripts", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "identity/webapp/webpack.frontend.js", "max_forks_repo_name": "saltaf07/Public-Scripts", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.5855855856, "max_line_length": 97, "alphanum_fraction": 0.4703490342}
const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
const Dotenv = require('dotenv-webpack');
const styledComponentsTransformer = createStyledComponentsTransformer({
  displayName: true,
});
const browserTargets = {
  edge: '17',
  firefox: '60',
  chrome: '67',
  safari: '11.1',
};

module.exports = {
  mode: process.env.NODE_ENV || 'development',
  devtool: process.env.NODE_ENV !== 'production' ? 'inline-source-map' : false,
  output: {
    // Will be available on the router at `/assets/bundle.js`
    filename: 'bundle.js',
    pathinfo: false,
    publicPath: `/assets/`,
  },
  module: {
    rules: [
      // Load and convert typescript to javascript
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules\/(?!@weco).*/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              configFile: 'tsconfig.frontend.json',
              transpileOnly: true,
              experimentalWatchApi: true,
              getCustomTransformers: () => ({
                before: [styledComponentsTransformer],
              }),
            },
          },
        ],
      },
      // Pass javascript through babel with preset env to target browsers.
      {
        test: /\.(js)$/,
        exclude: /node_modules\/(?!@weco).*/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                'babel-plugin-styled-components',
                'babel-plugin-transform-typescript-metadata',
                ['@babel/plugin-proposal-decorators', { legacy: true }],
              ],
              presets: [
                '@babel/preset-flow',
                '@babel/preset-react',
                [
                  '@babel/preset-env',
                  {
                    targets: browserTargets,
                    modules: 'commonjs',
                    useBuiltIns: 'usage',
                    corejs: 3,
                  },
                ],
              ],
            },
          },
        ],
      },
      // Pass through style loader.
      {
        test: /\.s?[ac]ss$/,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass'),
              additionalData: '$is-next: true;',
              sassOptions: {
                includePaths: ['../../common/styles'],
              },
            },
          },
        ],
      },
    ],
  },

  plugins: [new Dotenv({
    systemvars: true,
  })],

  // Add problem packages to alias.
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },

  // We could use React from CDN.
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};
