Why using webpack?

1

There is a lot of enthusiasm around webpack (Use Webpack with Meteor simply by adding packages (meteor-webpack 1.0 is out!))
Wondering if I should use it, I’ve been reading a bunch of things on what is webpack, and I’m still struggling to clearly get the why. Most of the tutorials tells you how to get webpack working, but not so much why you should use it. So far I got:

  • real-time hot reload. How does it differ from Meteor hot code push?
  • code bundles. Meteor already bundles all the client code in one file. So I guess the advantage here is to split the code in different bundles for faster page loads.

Other things like load order or ES2015 features are now included in Meteor 1.3.

2 Likes
2

I also haven’t seen much compelling reason to use it within Meteor. Webpack is great for people outside the Meteor world. But I was already using Meteor when I first heard about Webpack, so I didn’t see what the big deal was. :slight_smile:

3

With Meteor 1.3, there isn’t as much of a reason, except Webpack will probably be a bit faster with reloads.

In Meteor 1.2, Webpack was one of the only ways to get ES2015 module support and client-side NPM, but these things now work by default in 1.3.

2 Likes
4

Also (correct me if I’m wrong), but Webpack is the only way to get Meteor to work with CSS Modules.

1 Like
5

What about this?

1 Like
6

With this solution React Hotloading in native Meteor is ready (i.e. no webpack) it reloads faster or with same speed. Client side at least.

Webpack is the only way to multiple entry points atm.

2 Likes
7

Using front-end tools like PostCSS or CSS Modules without any hacks is much much simpler with Webpack than with Meteor. With Meteor we even can’t import css or scss or less or whatever style files from node_modules. So I think that using Webpack with Meteor is really helpful nowadays especially with thereactivestack project because you don’t need to configure webpack by yourself, just add a package.

8

Webpack supports code splitting and Webpack 2 also supports tree shaking which is very important to reduce bundle size. Meteor 1.3 is missing these important features.

2 Likes
9

Using my CSS Modules plugin you can import SCSS files as shown in my React Toolbox example app. Starting from an empty project, it would take about 6 lines of configuration in package.json to do so:

"cssModules": {
    "extensions": [ "scss" ],
    "explicitIncludes": [
      "node_modules/some-npm-package"
    ]
  }

Granted, you can’t import CSS files from NPM packages right now, so that could be a dealbreaker (but I should be able to change that).
If you want to stick with standard Meteor, it’s an easy way to go.

2 Likes
10

@sashko how much is a “bit faster”? I haven’t tried the 1.3 rc yet, so idk the build speeds, but webpack is well under a second for me. I can only remember 1.1 and 1.2 being painfully slow. if 1.3 fixes this, yay!

11

Yeah, I really like your work, but still, I think this is a very big amount of magic for me :wink: I would love to have a clean way to hook any build tool without changes in core packages such as ecmascript, minifiers etc. This is really simple and clean with Webpack loaders.

1 Like