Advertisement
Guest User

Untitled

a guest
Apr 25th, 2020
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* eslint-env node */
  2. import * as webpack from 'webpack';
  3. import * as path from 'path';
  4. import * as HtmlWebpackPlugin from 'html-webpack-plugin';
  5. import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
  6. import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
  7. import * as VirtualModulesPlugin from 'webpack-virtual-modules';
  8. import * as ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
  9.  
  10. import { resolvePluginPackages, getActivePluginsModule } from '@console/plugin-sdk/src/codegen';
  11. import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
  12. import { CircularDependencyPreset } from './webpack.circular-deps';
  13.  
  14. interface Configuration extends webpack.Configuration {
  15.   devServer?: WebpackDevServerConfiguration;
  16. }
  17.  
  18. const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  19.  
  20. const NODE_ENV = process.env.NODE_ENV || 'development';
  21. const HOT_RELOAD = process.env.HOT_RELOAD || 'true';
  22. const CHECK_CYCLES = process.env.CHECK_CYCLES || 'false';
  23.  
  24. /* Helpers */
  25. const extractCSS = new MiniCssExtractPlugin({ filename: 'app-bundle.[contenthash].css' });
  26. const overpassTest = /overpass-.*\.(woff2?|ttf|eot|otf)(\?.*$|$)/;
  27. const isDevelopment = NODE_ENV !== 'production';
  28.  
  29. const config: Configuration = {
  30.   entry: [
  31.     './polyfills.js',
  32.     './public/components/app.jsx',
  33.     'monaco-editor-core/esm/vs/editor/editor.worker.js',
  34.   ],
  35.   output: {
  36.     path: path.resolve(__dirname, 'public/dist'),
  37.     publicPath: 'static/',
  38.     filename: '[name]-bundle.js',
  39.     chunkFilename: '[name]-[chunkhash].js',
  40.   },
  41.   devServer: {
  42.     writeToDisk: true,
  43.     progress: true,
  44.     hot: HOT_RELOAD !== 'false',
  45.     inline: HOT_RELOAD !== 'false',
  46.   },
  47.   resolve: {
  48.     extensions: ['.glsl', '.ts', '.tsx', '.js', '.jsx'],
  49.   },
  50.   node: {
  51.     fs: 'empty',
  52.     // eslint-disable-next-line camelcase
  53.     child_process: 'empty',
  54.     net: 'empty',
  55.     crypto: 'empty',
  56.     module: 'empty',
  57.   },
  58.   module: {
  59.     rules: [
  60.       { test: /\.glsl$/, loader: 'raw!glslify' },
  61.       {
  62.         test: /(\.jsx?)|(\.tsx?)$/,
  63.         exclude: /node_modules\/(?!(bitbucket|ky)\/)/,
  64.         use: [
  65.           { loader: 'cache-loader' },
  66.           {
  67.             loader: 'thread-loader',
  68.             options: {
  69.               // Leave one core spare for fork-ts-checker-webpack-plugin
  70.               workers: require('os').cpus().length - 1,
  71.             },
  72.           },
  73.           {
  74.             loader: 'babel-loader',
  75.             options: {
  76.               presets: ['@babel/preset-env'],
  77.               plugins: [
  78.                 '@babel/plugin-syntax-dynamic-import',
  79.                 [
  80.                   '@babel/plugin-transform-runtime',
  81.                   {
  82.                     regenerator: true,
  83.                   },
  84.                 ],
  85.                 isDevelopment && 'react-refresh/babel',
  86.               ],
  87.               ignore: ['node_modules/bitbucket'],
  88.             },
  89.           },
  90.           {
  91.             loader: 'ts-loader',
  92.             options: {
  93.               // Always use the root tsconfig.json. Packages might have a separate tsconfig.json for storybook.
  94.               configFile: path.resolve(__dirname, 'tsconfig.json'),
  95.               happyPackMode: true, // This implicitly enables transpileOnly! No type checking!
  96.               transpileOnly: true, // fork-ts-checker-webpack-plugin takes care of type checking
  97.             },
  98.           },
  99.         ],
  100.       },
  101.       {
  102.         test: /\.s?css$/,
  103.         exclude: /node_modules\/(?!(@patternfly)\/).*/,
  104.         use: [
  105.           {
  106.             loader: MiniCssExtractPlugin.loader,
  107.             options: {
  108.               publicPath: './',
  109.             },
  110.           },
  111.           { loader: 'cache-loader' },
  112.           { loader: 'thread-loader' },
  113.           {
  114.             loader: 'css-loader',
  115.             options: {
  116.               sourceMap: true,
  117.             },
  118.           },
  119.           {
  120.             loader: 'resolve-url-loader',
  121.             options: {
  122.               sourceMap: true,
  123.             },
  124.           },
  125.           {
  126.             loader: 'sass-loader',
  127.             options: {
  128.               sourceMap: true,
  129.               outputStyle: 'compressed',
  130.             },
  131.           },
  132.         ],
  133.       },
  134.       {
  135.         test: /\.css$/,
  136.         include: path.resolve(__dirname, './node_modules/monaco-editor'),
  137.         use: ['style-loader', 'css-loader'],
  138.       },
  139.       {
  140.         test: /\.(png|jpg|jpeg|gif|svg|woff2?|ttf|eot|otf)(\?.*$|$)/,
  141.         exclude: overpassTest,
  142.         loader: 'file-loader',
  143.         options: {
  144.           name: 'assets/[name].[ext]',
  145.         },
  146.       },
  147.       {
  148.         // Resolve to an empty module for overpass fonts included in SASS files.
  149.         // This way file-loader won't parse them. Make sure this is BELOW the
  150.         // file-loader rule.
  151.         test: overpassTest,
  152.         loader: 'null-loader',
  153.       },
  154.     ],
  155.   },
  156.   optimization: {
  157.     splitChunks: {
  158.       chunks: 'all',
  159.     },
  160.     runtimeChunk: true,
  161.   },
  162.   plugins: [
  163.     new webpack.NormalModuleReplacementPlugin(/^lodash$/, 'lodash-es'),
  164.     isDevelopment && new ReactRefreshWebpackPlugin(),
  165.     new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
  166.     new HtmlWebpackPlugin({
  167.       filename: './tokener.html',
  168.       template: './public/tokener.html',
  169.       inject: false,
  170.       chunksSortMode: 'none',
  171.     }),
  172.     new HtmlWebpackPlugin({
  173.       filename: './index.html',
  174.       template: './public/index.html',
  175.       production: NODE_ENV === 'production',
  176.       chunksSortMode: 'none',
  177.     }),
  178.     new MonacoWebpackPlugin({
  179.       languages: ['yaml'],
  180.     }),
  181.     new webpack.IgnorePlugin(/prettier/),
  182.     extractCSS,
  183.   ],
  184.   devtool: 'cheap-module-source-map',
  185.   stats: 'minimal',
  186. };
  187.  
  188. if (CHECK_CYCLES === 'true') {
  189.   new CircularDependencyPreset({
  190.     exclude: /node_modules|public\/dist/,
  191.     reportFile: '.webpack-cycles',
  192.     thresholds: {
  193.       minLengthCycles: 17,
  194.     },
  195.   }).apply(config.plugins);
  196. }
  197.  
  198. /* Production settings */
  199. if (NODE_ENV === 'production') {
  200.   config.output.filename = '[name]-bundle-[hash].min.js';
  201.   config.output.chunkFilename = '[name]-chunk-[chunkhash].min.js';
  202.   extractCSS.filename = '[name]-[chunkhash].min.css';
  203.   // Causes error in --mode=production due to scope hoisting
  204.   config.optimization.concatenateModules = false;
  205.   config.stats = 'normal';
  206. }
  207.  
  208. /* Console plugin support */
  209. config.plugins.push(
  210.   new VirtualModulesPlugin({
  211.     'node_modules/@console/active-plugins.js': getActivePluginsModule(resolvePluginPackages()),
  212.   }),
  213. );
  214.  
  215. export default config;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement