Tips and tricks in using Webpack
github.com
Tips and tricks in using Webpack
1–10 of 23 posts
Re: Tips and tricks in using Webpack
#2I'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 :)
Re: Tips and tricks in using Webpack
#3I 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.
Re: Tips and tricks in using Webpack
#4I 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.
[deleted]
Re: Tips and tricks in using Webpack
#5I'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…
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".
Re: Tips and tricks in using Webpack
#6I'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…
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 or…
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.
Re: Tips and tricks in using Webpack
#7I 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.
Re: Tips and tricks in using Webpack
#8I'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…
Webpack can help you with this. But I'm really sorry to tell you this... you're going to have to learn how to use it first.
If you have a specific use case and mangled array of libraries, frameworks and build systems, you can't expect it to be handled automatically by a magic new tool.
Re: Tips and tricks in using Webpack
#9I'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…
This is the best resource I've found so far:
http://survivejs.com/webpack/introduction/
Re: Tips and tricks in using Webpack
#10I 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.
NODE_ENV is just a convention though. Not specific to Heroku even if they might have popularized it.