
Tips and tricks in using Webpack - yedakesom
https://github.com/rstacruz/webpack-tricks
======
nnq
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-
brewed-framework legacy portion" and maybe also has a few "isomorphic modules"
(ya know, the kind of code that can run both in browser and in backend nodejs
depending on context, but it "home made", not based on some nice magic sauce
like Meteor). Because this is what you see in real world projects and the
first questions when I tocuhed webpack were more along the lines of "how tf do
I mix this old-school browsers global script + this commonjs/require one +
this idiosincratic node-browser-isomorphic one" and "how to I tweak
minification rules for one file only to prevent weird code breaks from
variable renames"...

It's amazing how much _modern js learning resources_ assume you _already
know!_ And how plain/normal they expect your project to be when in real life
you're always seeing a mystic-quantum-chemistry-frankestein-puppy-hybrid thing
:)

~~~
tropin
Your comment is spot on. I checked the webpack home hoping this tool somehow
could optimize and/or clean inherited messed up projects with dozens of js
libraries, only to learn that is up to the programmer to explicitly tell it
the dependecies. At least, that's what I expected when I read "webpack
simplifies your workflow by quickly constructing a dependency graph of your
application and bundling them in the right order".

~~~
Sacho
In order to construct the dependency graph, it still needs some mechanism
through which to determine that a piece is dependent on another piece. Webpack
uses several popular mechanisms for that(amd, commonjs, maybe others I dont
know of), but they're all manual.

It sounds like you were looking for a tool more akin to UglifyJS or google's
closure compiler, which(as far as I know) take a single file and analyze it,
and then try to output "better" code equivalent to it.

Webpack tries to solve a different problem - from a bunch of scattered lego
blocks you define an "application"(by defining dependencies), and have webpack
bundle it together for you.

------
garysieling
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.

~~~
acemarke
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...](http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-
generic-redux-modals-and-building-better-bundles/) .

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

------
thelarkinn
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

------
kasbah
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 ninja-build-gen [2] for a few of my Javascript projects) but Webpack's
hot-reloading would be really nice to have.

I do think it would suffice if Browserify was a bit more performant so I don't
have to wait for it after making a change. I keep meaning to try Rollup to see
if it will give me any advantages in that regard.

[1]: [http://ninja-build.org](http://ninja-build.org)

[2]: [https://www.npmjs.com/package/ninja-build-
gen](https://www.npmjs.com/package/ninja-build-gen)

~~~
petecoop
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](https://www.npmjs.com/package/watchify)

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

~~~
kasbah
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!

~~~
91bananas
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.

------
jvain
Booleans, how do they work?

    
    
      const DEBUG = process.env.NODE_ENV !== 'production'
      module.exports = {
        debug: DEBUG ? true : false

------
purplerabbit
I wish I had had this a year ago. Literally every item listed I had to figure
out awkwardly through digging around in github issues, blog posts, and stack
overflow.

