Live data from Hacker News

Tips and tricks in using Webpack

github.com

11–20 of 23 posts

Re: Tips and tricks in using Webpack

#11
post #2

I'm more interested in an up-to-date "webpack for complete newbs with hairy hybrid-modern-legacy projects" resource, that would introduce you to everything from scratch with real examples. Hopefully including more real-world cases than greenfield clean code projects: I want something like "start using webpack in an already started project that mixes jQuery & Backbone, React and some Polymer on a few pages, and a home…

If it helps, my React/Redux links list ([0]) has two Webpack-related link categories: one for Webpack tutorials ([1]), and another for Webpack advanced techniques ([2]) such as build speed optimization, code splitting, Hot Module Reloading, etc. Plenty of good info linked from there.

[0] https://github.com/markerikson/react-redux-links

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/markerikson/react-redux-links/blob/master...

Re: Tips and tricks in using Webpack

#12

I think the webpack documentation is missing the "why" in a lot of cases, so I sometimes find it difficult to map my problems to the right area of docs. The "vendor" and module splitting are good examples of this. Or, in this example, using "process.env.NODE_ENV" makes a lot of sense if you use Heroku, but is more cosmetic if you control the entire build chain.

I wrote a blog post recently that tries to clarify how and why `process.env.NODE_ENV` relates to JS build optimization: http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-g... .

Re: Tips and tricks in using Webpack

#13

I think the webpack documentation is missing the "why" in a lot of cases, so I sometimes find it difficult to map my problems to the right area of docs. The "vendor" and module splitting are good examples of this. Or, in this example, using "process.env.NODE_ENV" makes a lot of sense if you use Heroku, but is more cosmetic if you control the entire build chain.

I wrote a blog post recently that tries to clarify how and why `process.env.NODE_ENV` relates to JS build optimization: http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-g... .

That's really interesting, I didn't realize so many libraries depended on it, or that you could set it, thanks!

Re: Tips and tricks in using Webpack

#14
post #7

I have tried to make use of Webpack a few times for my projects but the only times I have actually managed is when starting on a new project with a boilerplate and config generator. The way it is set up doesn't seem to meld with my way of thinking at all. I really like how straight forward Browserify is. Likely this is because I am quite accustomed to Unix shell tools and makefiles (I actually use Ninja [1] with ninj…

Have you tried using watchify [1] to speed up your builds in development? I've also been using browserify-hmr [2] which is working nicely for hot module replacement and found it easier to setup than Webpack's hmr.

I think one of Webpack's benefits is that this stuff is all bundled with it, so everyone's using it but with browserify you need to go out and find these solutions yourself

[1]: https://www.npmjs.com/package/watchify

[2]: https://www.npmjs.com/package/browserify-hmr

Re: Tips and tricks in using Webpack

#15
post #7

I have tried to make use of Webpack a few times for my projects but the only times I have actually managed is when starting on a new project with a boilerplate and config generator. The way it is set up doesn't seem to meld with my way of thinking at all. I really like how straight forward Browserify is. Likely this is because I am quite accustomed to Unix shell tools and makefiles (I actually use Ninja [1] with ninj…

Have you tried using watchify [1] to speed up your builds in development? I've also been using browserify-hmr [2] which is working nicely for hot module replacement and found it easier to setup than Webpack's hmr. I think one of Webpack's benefits is that this stuff is all bundled with it, so everyone's using it but with browserify you need to go out and find these solutions yourself [1]: https://www.npmjs.com/packag…

Yes, I did try watchify but encountered some major errors during usage that made me give up. I might give it another go and see if it is solved now.

Ah, it never even occurred to me to look for something like browserify-hmr, will definitely try this out!

Re: Tips and tricks in using Webpack

#16
Awesome post!!! I'll reach out to our awesome-webpack companion repo and add this repo. Besides that, on behalf of the webpack core team, feel free and reach out if you have any other questions or want to get involved.

We even have a new docs page where hopefully _most_ of the things on this document are (if not should be) covered.

webpack.js.org webpack.js.org/concepts

~Sean + webpack Team

Re: Tips and tricks in using Webpack

#17
post #15

Earlier quoted context omitted.

Have you tried using watchify [1] to speed up your builds in development? I've also been using browserify-hmr [2] which is working nicely for hot module replacement and found it easier to setup than Webpack's hmr. I think one of Webpack's benefits is that this stuff is all bundled with it, so everyone's using it but with browserify you need to go out and find these solutions yourself [1]: https://www.npmjs.com/packag…

Yes, I did try watchify but encountered some major errors during usage that made me give up. I might give it another go and see if it is solved now. Ah, it never even occurred to me to look for something like browserify-hmr, will definitely try this out!

I've been running browserify under grunt and by itself, both using watchify, and I have no complaints. I came from just grunt, and a bunch of different tasks like concat, uglify, etc. Browserify has been a revelation, way faster compilation times, way less config, way fewer installed packages. Definitely give it a go again.

Re: Tips and tricks in using Webpack

#19
post #2

I'm more interested in an up-to-date "webpack for complete newbs with hairy hybrid-modern-legacy projects" resource, that would introduce you to everything from scratch with real examples. Hopefully including more real-world cases than greenfield clean code projects: I want something like "start using webpack in an already started project that mixes jQuery & Backbone, React and some Polymer on a few pages, and a home…

We recently moved a big piece of code from custom script loading -> requirejs -> webpack. I really couldn't even tell you how we managed to do it. I think it helped that we had a few goals in mind and we set out to find a better solution.

First, the custom js loading was buggy and inefficient so we moved it to requirejs. Then we wanted everything to be bundled into a single file so we figured out r.js. r.js was really slow and we wanted pre-compiled handlebars templates so we moved over to webpack. Now, we keep accidentally writing es2015 and breaking IE11 so it'll probably be time to introduce babel at some point.

It was really no different than any other major refactoring. Fix up the code and then chisel away the error messages one at a time.

Re: Tips and tricks in using Webpack

#20
post #2

I'm more interested in an up-to-date "webpack for complete newbs with hairy hybrid-modern-legacy projects" resource, that would introduce you to everything from scratch with real examples. Hopefully including more real-world cases than greenfield clean code projects: I want something like "start using webpack in an already started project that mixes jQuery & Backbone, React and some Polymer on a few pages, and a home…

We are at the tail end of introducing Webpack to an ~8yr old codebase and this has been our approach:

* Allocate training time for all team members to go through some e-learning courses / tutorials about Webpack (Frontend Masters, egghead.io, etc) and UMD (assorted tutorials / blog posts)

* After much hand-wringing we decided that for our situation converting our all-over-the-place JS codebase to UMDs with global fallbacks was the most flexible approach. This allows us to use the same code both in Webpack bundles and in our existing litany of tags. Introducing Webpack has forced us to pay down a lot of technical debt during the process, something that has been years overdue but had to get done eventually. It's been frustrating having to clean up the mess made by developers who no longer work here but ¯\_(ツ)_/¯

* Created a long-running feature branch where we added Node.js and Webpack dependencies to our existing Java / Spring / Maven project

* As internal libraries are converted to UMD, merge them into the feature branch and add them to the appropriate Webpack bundle. Any 3rd party JS libraries that are available via npm have been removed from our codebase and are now pulled in as dependencies via package.json

* Put everything behind feature toggles

* Experiment with our CD / CI pipelines using the Webpack feature branch to make sure we can reliably break the Maven build when something goes wrong with Webpack / Node.js, generate fresh bundles for hot / partial deploys, and get things deployed to an app server in one of our dev environments without any issues

* Do demos every 2-3 weeks for both our team and other teams / managers to show progress, share lessons learned, etc

All of this has unfolded along with our regular workload over the last 3 months or so. We've taken a measured approach with small steps along the way and it's worked out well.

A lot of people are off for the holidays so my guess is we'll start introducing Webpack bundles into production sometime in mid-late January.

As an added benefit, this project has been used to establish a bit of a beachhead with respect to introducing Node.js to our various codebases so we can start doing automated testing, modern JS dependency management, code linting / style enforcement, and providing better developer tools to the team(s) that write JS / CSS / etc.

Post reply on HN