CODEWITHSUNDEEP
webpack
SuperUberDuper
SuperUberDuper

Reputation: 9633

Webpack reported size is huge compared to actual output

I'm getting that Webpack reported size is huge compared to actual output 

[BABEL] Note: The code generator has deoptimised the styling of "node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "node_modules/moment/moment.js" as it exceeds the max of "100KB".
Hash: 115ba034c25a5de14baa
Version: webpack 1.13.1
Time: 35574ms
      Asset       Size  Chunks             Chunk Names
    dist.js     563 kB       0  [emitted]  main
dist.js.map     855 kB       0  [emitted]  main
 index.html  180 bytes          [emitted]  
   [0] multi main 28 bytes {0} [built]
    + 130 hidden modules
Child html-webpack-plugin for "index.html":
        + 4 hidden modules

the output is around 20kb, also it takes ages, around 10s

CONFIG:

/* globals __dirname, process */
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var node_env = process.env.NODE_ENV || 'development';
console.log(node_env)

var config = {
  context: __dirname + '/client',
  entry: {
    main: [
      "./app.js"
    ]
  },
  output: {
    path: __dirname + "./public",
    filename: "dist.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      hash: true,
      filename: 'index.html',
      template: __dirname + '/client/index.html',
    })
  ]
}

if (node_env === 'production') {
  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }));
}

module.exports = config

Upvotes: 0

Views: 364

Answers (2)

AnthonyMars
AnthonyMars

Reputation: 1

I had the same issue in my project:

assets/profile-view/dist/bundle.js" type="text/babel">

But after removing the {type="text/babel"} attribute from the code, the error message disappeared

Upvotes: 0

andreypopp
andreypopp

Reputation: 6953

I assume the question is about these lines:

[BABEL] Note: The code generator has deoptimised the styling of "node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "node_modules/moment/moment.js" as it exceeds the max of "100KB".

That message is from babel-loader which encounters sources with gigantic sizes (over 100kb). Usually and in this exact case that means you (or some of your dependencies) require already bundled libraries (lodash and moment) which don't require processing through Babel.

The solution would be to excluded node_modules/ from babel-loader configuration (add this to module.loaders section of your webpack.config.js):

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
}

This works as the common expectation is to publish package on npm already compiled to es5 so they don't usually need to be processed through Babel.

Upvotes: 1

Related Questions