owais/webpack-bundle-tracker

Spits out some stats about webpack compilation process to a file

Andrew Chen

@ayc92

@owais: When you get a chance, could you take a look at this PR? It has to do with appending to the stats file rather than overwriting what was already in it.

Juho Vepsäläinen

@bebraw

@owais about webpack-doctor, https://github.com/js-dxtools/webpack-validator is achieving the vision :)

@owais there's also https://github.com/js-dxtools/webpack-build-analyzer . more in a stub stage right now

Eitan R

@erosenberg

@owais - Hey! I've been following your tutorial and cannot get webpack-bundle-tracker to see that I'm compiling a CSS bundle separately. Is this a common issue?

Owais Lone

@owais

Not that I'm aware of, could you share your webpack config and bundle tracker output?

Eitan R

@erosenberg

hey! sure thing

is there a good way to format them in Gitter?

I apologize for not sharing the files - they're hosted on an enterprise server and contain some sensitive info but I'll share what I can

var webpack = require('webpack');
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var BundleTracker = require('webpack-bundle-tracker');

var BASE = __dirname;

module.exports = {
    entry: {
      app: [BASE + '/js/index.js']
    },
    output: {
        path: BASE + '/../static/compiled/',
        filename: "[name]-[hash].js"
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),        
        new ExtractTextPlugin('stylez.css', { allChunks: true })
    ],
    module: {
        noParse: /vendor/,
        loaders: [
            {
                test: /\.js?$/,
                loaders: ['babel-loader']
            },
            {
                test: /\.(less|css)?$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            },
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.csv$/,
                loader: "dsv-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif)/,
                loader: 'file-loader'
            }
        ]
    }
};

here's my webpack-stats.json:

{
    "status": "done",
    "chunks": {
        "app": [{
            "name": "bundle.js",
            "path": "/Users/eitan/Sites/myApp/static/compiled/bundle.js"
        }]
    }
}

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/compiled/')

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'compiled/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend/webpack-stats.json')
    }
}

@owais ^

Eitan R

@erosenberg

one of the main reasons things aren't working is also the webpack-stats.json doesn't seem to update or regenerate ever...

Here's my template:

<!DOCTYPE html />
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            {% if title %} {{ title }} | {% endif %}
            {{ site_title|default:_('Lexikon') }}
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="/static/images/favicon.png">

        {% render_bundle 'style' %}

    </head>
   <body>...</body>

    {% render_bundle 'app' %}
    </body>
</html>

Owais Lone

@owais

render_bundle 'style' is wrong as there is no style bundle. There is only 1 app bundle. You should use render_bundle 'style' 'css'. That should work.

.. that said, your stats file indeed does not contain any references to CSS so that is a problem

Does webpack actually generate any CSS bundles at all on disk?

Which version of bundle-tracker are you using?

Eitan R

@erosenberg

@owais - sorry for the delay!

I was in a meeting

I am using "webpack-bundle-tracker": "^0.1.0"

Well, sometimes it creates it, sometimes it doesn't (the CSS file)

sorry, "stylez"

Eitan R

@erosenberg

@owais - at what point in the build process should the webpack-stats be updated?

Eitan R

@erosenberg

ok yes now the CSS is always there, but webpack-stats is still not updating...

Eitan R

@erosenberg

@owais - and I figured it out! I was pointing to the wrong directory from the webpack settings

sorry about that! now everything updates beautifully

José Luis

@SalahAdDin

Hi guys, one question

Is possible use this package with ES6?

And use with the last webpack version?

Because i have problems with ti.

Parth Choudhary

@parth-choudhary

@owais I have an issue, I am using compression-webpack-plugin

It creates the .gz file, but bundle-tracker picks chunks and by default .js is loaded

Any workaround for it?

Owais Lone

@owais

@SalahAdDin Please create an issue on github and add details about the problem. Preferably, also publish an example test project that reproduces the problem.

@parth-choudhary It should work out of the box if you files end with the extension .js.gz or .css.gz

If it doesn't or if you'd like support for more file types, please file an issue on github

Tyler Hallada

@thallada

I'm having the same issue as @parth-choudhary

Eddy Ekofo

@eddyekofo94

Having the problem but I am on pyramid framework, google brought me here. @thallada @owais

François GUÉRIN

@frague59

Hi
I'm new with webpack technology, and I've to upgrade a project to use it
I've build the site arround jQuery / bootstrap 3, and a custom bunch of css (bs overridings) and js (forms)
I've followed the http://owaislone.org/blog/webpack-plus-reactjs-and-django/ tutorial, but I does not understand where to put my own assets and how to "ask" to webpack to package them
I also use a bunch of django apps, will they be bundled too ?
Thanks for your help !

Artem

@apopelyshev

HEY! ANYBODY HERE?? I NEED HELP, I can explain my case, but it seems that nobody here would even answer @owais

Owais Lone

@owais

It's better to just ask the question instead of asking if you can ask :)

I'll try to answer later today

Artem

@apopelyshev

Well. To begin with, this is my webpack-config:

module.exports = [{
  context: __dirname,
  entry: {
    main: './assets/main/main.js'
  },
  output: {
    path: path.resolve('./assets/bundles/'),
    filename: "[name]-[hash].js"
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]-[hash].css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
              indentedSyntax: true,
              indentType: 'tab'
            }
          }
        ]
      }
    ]
  }
}];

Yeah, it differs a bit from "standard" configurations when it comes to processing SASS, but ....I think that's okay, right?

Well, I've done almost everything at this moment:

wrote my JS modules
pipped webpack-bundle-tracker and django-webpack-loader, changed settings.py (just as it's written in the docs)
changed the templates

I even get the result, but only the js-file

Artem

@apopelyshev

Of course I don't fully understand how does this plugin works, but it's clear to me, that if the css-part of the bundle is not mentioned in the STATS file after the building process is complete -
{% render_bundle 'main' 'css' %} will return nothing. So I'm just wondering how I could make this thing work @owais

Owais Lone

@owais

Does the stats file contain bundle that has .css files in it?

Where communities thrive

People

Repo info

Activity