How to use @loadable/webpack-plugin - 8 common examples

removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
      }),

      // Dump chunk mapping and entryPoints so we can determine which client chunks to send depending on which
      // chunks were imported during server-side rendering
      new LoadablePlugin({
        writeToDisk: true,
      }),
    ];

    // if (!this.isServer()) {
    //   plugins.push(
    //     new PolyfillInjectorPlugin({
    //       polyfills: ['Promise'],
    //     }),
    //   );
    // }

    if (this.isDev) {
      plugins.push(
        // enable hot reloading.
        new webpack.HotModuleReplacementPlugin(),

// This swaps the server side window object with a standard browser window.
    new webpack.NormalModuleReplacementPlugin(
      /core\/window/,
      'core/browserWindow.js',
    ),
    new CircularDependencyPlugin({
      exclude: /node_modules/,
      failOnError: true,
    }),
  ];

  if (includeLoadablePlugin) {
    // We need this file to be written on disk so that our server code can read
    // it. In development mode, webpack usually serves the file from memory but
    // that's not what we want for this file.
    plugins.push(new LoadablePlugin({ writeToDisk: true }));
  }

  if (excludeOtherAppLocales) {
    plugins.push(
      // This allow us to exclude locales for other apps being built.
      new webpack.ContextReplacementPlugin(
        /locale$/,
        new RegExp(`^\\.\\/.*?\\/${appName}\\.js$`),
      ),
    );
  }

  return plugins;
}

style: {
              test: m => m.constructor.name === 'CssModule',
              name: styleFileName,
              chunks: 'all',
              enforce: true,
            },
          },
        },
      },
      
      plugins: [
        new HotModuleReplacementPlugin(),
        
        // create loadable-stats.json when server side rendering enabled
        ...(extend.serverSideRendering ? [
          new LoadablePlugin({
            filename: path.join(output, 'loadable-stats.json'),
            writeToDisk: true,
          }),
        ] : []),
        
        // create html files
        ...(extend.templateFiles.length > 0 ? extend.templateFiles.map(templateFile => {
          const extname: string = path.extname(templateFile);
          const filename: string = path.basename(templateFile, extname);
          
          return new HtmlWebpackPlugin({
            template: path.join(cwd, 'src', app, templateFile),
            filename: filename + '.html',
          });
        }) : []),
      ],

// create css files
        new MiniCssExtractPlugin({
          filename: `${chunkPath}[name].[hash].css`,
          chunkFilename: `${chunkPath}[name].[hash].css`,
        }),
        
        // create size report
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          reportFilename: path.join(output, 'size-report.html'),
          openAnalyzer: sizeReport,
        }),
        
        // create loadable-stats.json when server side rendering is enabled
        ...(extend.serverSideRendering ? [
          new LoadablePlugin({
            filename: '../loadable-stats.json',
            writeToDisk: true,
          }),
        ] : []),
        
        // create html files
        ...(extend.templateFiles.length > 0 ? extend.templateFiles.map(templateFile => {
          const extname: string = path.extname(templateFile);
          const filename: string = path.basename(templateFile, extname);
          
          return new HtmlWebpackPlugin({
            template: path.join(cwd, 'src', app, templateFile),
            filename: filename + '.html',
          });
        }) : []),
      ],

target !== "server" ? `../` : ""
      }analyze/${target}-${mode}.html`,
      openAnalyzer: false,
      logLevel: "silent"
    }),
    new WatchIgnorePlugin([new RegExp(outDir)])
  ];

  // Support HMR in development. Only needed in client.
  if (target !== "server" && mode === "development")
    config.push(new HotModuleReplacementPlugin());

  // Needed for code splitting in client.
  if (target !== "server")
    config.push(
      new LoadablePlugin({
        filename: `../bundling/chunks.${target}.json`
      })
    );

  // Avoid code splitting in server.
  if (target === "server")
    config.push(new optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
  return config;
};

export default function getPlugins(isAnalyze) {
  return [
    new webpack.IgnorePlugin(/webpack\.client\.babel/),
    new webpack.EnvironmentPlugin({ NODE_ENV: `${env}` }),
    new CleanWebpackPlugin([joinPath('dist/server.js')], {
      root: joinPath(),
    }),
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
    new LoadablePlugin(),
    ...(isAnalyze ? [new BundleAnalyzerPlugin({ analyzerPort: 8889 })] : []),
  ];
}

'graphql/execution',
            'graphql/validation',
          ]
        : undefined,
    output: {
      path: path.join(config.cachePath, target, 'static'),
      filename: dev ? '[name].js' : '[name]-bundle-[chunkhash:8].js',
      publicPath: `/web/static/`,
      libraryTarget: target === 'node' ? 'commonjs2' : undefined,
    },
    plugins: [
      new webpack.EnvironmentPlugin({
        __smooth_blocks: blocksPath,
        __smooth_pages: config.pagesPath,
      }),
      new LoadablePlugin(),
      ...(target === 'node' && dev ? [new SmoothCacheHotReloader()] : []),
      ...(target === 'web' && dev
        ? [new webpack.HotModuleReplacementPlugin()]
        : []),
    ],
  }

  const webpackConfig = onCreateWebpackConfig(config)({
    stage: getStage({ target, dev }),
    webpackConfig: defaultWebpackConfig,
  })

  return config.webpack(webpackConfig, options)
}

export default function getPlugins(isAnalyze) {
  return [
    new webpack.EnvironmentPlugin({
      NODE_ENV: `${env}`,
      ...(process.env.HEROKU_DOMAIN
        ? { HEROKU_DOMAIN: process.env.HEROKU_DOMAIN }
        : {}),
    }),
    new webpack.NoEmitOnErrorsPlugin(),
    new LoadablePlugin(),
    ...(isDevelopment
      ? [
          new webpack.NamedModulesPlugin(),
          new webpack.HotModuleReplacementPlugin(),
          new FriendlyErrorsWebpackPlugin(),
        ]
      : [
          new CleanWebpackPlugin([joinPath('dist')], {
            root: joinPath(),
            exclude: ['server.js'],
          }),
          new CopyWebpackPlugin([
            {
              from: './public',
              to: joinPath('dist/public'),
              ignore: ['.DS_Store'],