Big build files when using loadLanguages with webpack

[carbontwelve]

There seems to be an issue with require('prismjs/components/index.js') that results in webpack importing all language files for prism and outputting a 530kB built file (or just over 1.5MB with map).

The following app.js will produce a build app.min.js weighing 36.7 kB:

const Prism = require('prismjs/components/prism-core');
require('prismjs/plugins/toolbar/prism-toolbar.js');
require('prismjs/plugins/show-language/prism-show-language.js');
require('prismjs/plugins/line-numbers/prism-line-numbers.js');

require('prismjs/components/prism-clike')
require('prismjs/components/prism-markup')
require('prismjs/components/prism-markup-templating')
require('prismjs/components/prism-ini')
require('prismjs/components/prism-bash')
require('prismjs/components/prism-powershell')
require('prismjs/components/prism-yaml')
require('prismjs/components/prism-javascript')
require('prismjs/components/prism-sql')
require('prismjs/components/prism-twig')
require('prismjs/components/prism-php')
require('prismjs/components/prism-php-extras')
require('prismjs/components/prism-markdown')
require('prismjs/components/prism-basic')
require('prismjs/components/prism-go')

However the following app.js will produce a app.min.js weighing 583 kB:

const Prism = require('prismjs/components/prism-core');
require('prismjs/plugins/toolbar/prism-toolbar.js');
require('prismjs/plugins/show-language/prism-show-language.js');
require('prismjs/plugins/line-numbers/prism-line-numbers.js');

const loadLanguages = require('prismjs/components/index.js');
loadLanguages(['ini', 'bash', 'powershell', 'yaml', 'javascript', 'sql', 'twig', 'php', 'php-extras', 'markdown', 'basic', 'go']);

This is with using webpack 3.12.0 and the following webpack.config.babel.js:

const AutoPrefixCSSPlugin = require("less-plugin-autoprefix");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ImageMinPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const ExtractLESS = new ExtractTextPlugin('css/[name].[hash:8].css');

module.exports = (env = {}) => {
  if (!env.environment) {
    env.environment = 'local'
  }
  const isProduction = env.environment === 'production';
  console.log(env.environment);
  console.log('isProdutaction: ', isProduction);

  return {
    entry: [
      __dirname + "/source/_assets/js/app.js",
      __dirname + "/source/_assets/less/main.less",
    ],
    output: {
      path: __dirname + "/source",
      filename: "js/all.[hash:8].js"
    },
    devtool: (() => {
      if (isProduction) return false
      else return 'cheap-module-eval-source-map'
    })(),
    module: {
      rules: [
        {
          test: /\.(html)$/,
          use: {
            loader: 'html-loader'
          }
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
          test: /\.less$/,
          exclude: /node_modules/,
          use: ExtractLESS.extract([
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                url: false
              }
            },
            {
              loader: 'less-loader',
              options: {
                plugins: [
                  new AutoPrefixCSSPlugin({browsers: ["last 2 versions"]})
                ],
                sourceMap: true,
              }
            }
          ])
        },
      ]
    },
    plugins: [
      ExtractLESS,
      new ManifestPlugin(),
      new CopyWebpackPlugin([{
        from: __dirname + "/source/_assets/img/",
        to: __dirname + "/source/img/"
      }]),
      new ImageMinPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i
      }),
      new CleanWebpackPlugin(['source/img', 'source/css', 'source/js']),
    ]
  };
}

[mAAdhaTTah]

Duplicate of #1403. Will be solved by #1409.

[mAAdhaTTah]

The babel plugin is ready here: https://www.npmjs.com/package/babel-plugin-prismjs