How to Not Minify Source with webpack
The webpack JavaScript utility has taken over the modern JavaScript landscape, so much so that it's hard to be a JavaScript developer and not use it. JavaScript build utilities are the point where they do best practices implicitly, like minify code, caching, and more.
I was recently debugging a bundled webpack app and it quickly became clear that the only way forward was debugging the actual source, not the minified code. Duh.y
To prevent webpack from minifying the source, add the following to your webpack config:
{
// .... other webpack, like output, etc.
optimization: {
minimize: false
},
}
This simple flag makes debugging easier, if only enabled for a moment. I love how webpack allows you to take advantage of its feature set while being able to disable really quickly!
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript]()
I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most...
![MooTools 1.2 Tooltips: Customize Your Tips]()
I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...
You may also want to use
devtool: 'source-map'to enable high-resolution source maps for your bundles. It will make debugging with browser devtools infinitely easier. (They recognize the source maps and will even allow breakpoint debugging while viewing the original source files!)I’ve inherited a project and am trying to figure out how to edit the config file to stop WebPack from bundling CSS completely.
I think the way is to create two separate files, one for dev and one for production building. Then attach them to package.json > scripts and launch individually for their intended purpose.