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 Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Digg-Style Dynamic Share Widget Using MooTools]()
I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...
![Image Data URIs with PHP]()
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...
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.