Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What's New in Webpack 2

gist.github.com

Post reply on HN
Print view View original

11–20 of 71 posts

Re: What's New in Webpack 2

#11

Post by pgz »

sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

We are using jspm on an inherited codebase that was concatenated "by hand" with Rails' asset-pipeline (it has lots of old libraries and the overrides are very good to handle them).

What we hate is jspm is extremely slow in development for us. There are two main causes:

  - The amount of xhr. This is solvable with http2's server push (but
    our dev server is in Ruby, and there's no http2 webserver yet).
  - Apparently jspm doesn't cache the result of Babel's compilation,
    so for each page refresh every file has to be recompiled again.
We will look at Webpack2 when it's released, if it allows us to use these legacy libraries and wins us some development speed we will not look back.

Re: What's New in Webpack 2

#12

Post by pdeva1 »

sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

we looked at jspm and switched to webpack. detailed comparison here: http://blog.dripstat.com/why-we-switched-from-jspm-to-webpac...

Re: What's New in Webpack 2

#13

Post by hardwaresofton »

sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

I regularly use JSPM (with systemJS) for new projects, and I've liked it a lot.

Back when webpack first came out, I struggled a little bit with figuring out what it actually did. While I understand now, I am not why I would want to (or you) switch from JSPM to webpack. I don't see any features that webpack has that JSPM doesn't (and JSPM offered ES6 support well before of course, with babel on by default).

I like to use JSPM because of how relatively easy everything fits together -- and how straightforward it is to use and configure.

For those not familiar, JSPM is a package manager, module bundler, and module loader all in one for javascript applications.

This means you can:

  jspm install
And JSPM will look in NPM/Github (and it's possible to add registries, like bower) for stuff . That's the package management facet.

  jspm bundle-sfx js/main dist/build.js
Bundle your code all together, and drop it in a file

  
  
    // set our baseURL reference path
    System.config({
      baseURL: '/app'
    });

    // loads /app/main.js
    System.import('main.js');
Load your modules on the fly like you would with something like RequireJS.

As you may have guessed, JSPM relies on SystemJS (https://github.com/systemjs/systemjs) internally for some of the features above.

This video really opened my eyes to what it could do: https://www.youtube.com/watch?v=iukBMY4apvI

Re: What's New in Webpack 2

#14

Post by sandGorgon »

pdeva1 wrote: post #12
sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

we looked at jspm and switched to webpack. detailed comparison here: http://blog.dripstat.com/why-we-switched-from-jspm-to-webpac...

hey thanks for that!

we are serving our JS files as static assets behind nginx - we dont run nodejs on the server. does webpack allow you to create static assets (htmls,css,js) and serve them ?

the big issue is of course the fact that some libraries (Handsontable) are coming from github and are not on npm. is it possible to use them - with overrides,etc. ?

Re: What's New in Webpack 2

#15

Post by circlingthesun »

sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

I'm using SystemJs + JSPM and it's awesome. I previously made use of bower + requirejs. I love how JSPM automatically populates the config.js file so I can start importing whatever I installed straight away. SystemJS loads pretty much any module format so it was easy to use AMD modules while I was migrating to CommonJS. I recently moved over to ES6 modules without having to touch my SystemJS/JSPM config. I've not really looked into Webpack. It seems to be more popular than SystemJS. When I was considering it, the docs were not that great.

Re: What's New in Webpack 2

#16

Post by sandGorgon »

hardwaresofton wrote: post #13
sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

I regularly use JSPM (with systemJS) for new projects, and I've liked it a lot. Back when webpack first came out, I struggled a little bit with figuring out what it actually did. While I understand now, I am not why I would want to (or you) switch from JSPM to webpack. I don't see any features that webpack has that JSPM doesn't (and JSPM offered ES6 support well before of course, with babel on by default). I like to…

well i like jspm, but as others have mentioned - it is too slow. is there a way to compile all the dependencies and cache-buster-fingerprint them ? I serve my app statically using nginx and cloudfront.

Re: What's New in Webpack 2

#17

Post by hardwaresofton »

pgz wrote: post #11
sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

We are using jspm on an inherited codebase that was concatenated "by hand" with Rails' asset-pipeline (it has lots of old libraries and the overrides are very good to handle them). What we hate is jspm is extremely slow in development for us. There are two main causes: - The amount of xhr. This is solvable with http2's server push (but our dev server is in Ruby, and there's no http2 webserver yet). - Apparently jspm…

Do you have cache disabled?

Also, how long does your actual bundle time take? For small projects, I actually get away with just triggering the bundle command when appropriate files in the project change. I highly doubt it would work for you, but if you're spending 10 seconds waiting for stuff to come in over the network, and your bundle command runs in 5, you could just do that instead, and actually work with the bundled code (and generated source map)

Looks like I'm not the only one who thinks it's sometimes a good idea: https://60devs.com/optimizing--default-jspm-workflow-with-gu...

Re: What's New in Webpack 2

#18

Post by hakanderyal »

bshimmin wrote: post #10

What's the current thinking as of 2016 about Browserify versus Webpack? We've been happy Browserify users for a couple of years now, but I'm drawn to both the code splitting and dynamic expressions parts of Webpack. On the other hand, I'm not keen on introducing more complexity or changing things just to be "fashionable", and Browserify, Babel, and Gulp do work together reasonably well for us (though I didn't much en…

I was in the same boat in 2015, happily using a hacked-together solution of gulp-babel-browserify that took a few days to set up correctly. Than, after hearing about it enough, I decided to give webpack a try.

After a few hours of learning, I've succesfully set up webpack with hot module reloading and some other niceties. It was certainly much more cleaner than my old solution.

I'm a webpack user since than. It's easier to understand and easier to upgrade for me.

I didn't really took time to understand browserify, just enough to get me working, and I was an inexperienced JS developer at that time, which may explain why my first solution was hacky. But I still believe Webpack's architecture allows a cleaner and more understandable solution.

Re: What's New in Webpack 2

#19

Post by circlingthesun »

pgz wrote: post #11
sandGorgon wrote: post #8

has anyone used systemjs + jspm here ? I inherited a codebase using jspm (due to the override registry system that works great with legacy javascript packages - like Handsontabe) and am wondering about webpack.

We are using jspm on an inherited codebase that was concatenated "by hand" with Rails' asset-pipeline (it has lots of old libraries and the overrides are very good to handle them). What we hate is jspm is extremely slow in development for us. There are two main causes: - The amount of xhr. This is solvable with http2's server push (but our dev server is in Ruby, and there's no http2 webserver yet). - Apparently jspm…

SystemJS is dog slow if you load all your JS upfront. When mostly lazy loading, SystemJS performs reasonably, at least in my case.

Re: What's New in Webpack 2

#20

Post by seivan »

DCoder wrote: post #4
nathancahill wrote: post #2

Huge. Between webpack and Babel, JS is quickly progressing towards becoming a powerful language that is easy to write, read and reason about. I'm currently in the process of moving an inherited "minified by hand" codebase to ES6, and the difference is incredible. Not only are linters catching hundreds of previously unknown edge cases and bugs, but the end result is more performant and smaller in file size. It's very…

Have you looked into TypeScript? Type system helps you catch even more errors.

Second this. There is no reason not to use TypeScript now that's easier to work with .jsx and add 3:rd party libraries without dealing with type definitions.

Also, make sure to try out atom-typescript by Basarat. It's genuinely amazing and feels like Swift. :)

Post reply on HN