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!
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![WordPress-Style Comment Controls Using MooTools or jQuery]()
WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery.
The XHTML
Notice that we place the links into...
![MooTools Zebra Table Plugin]()
I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class.
The XHTML
You may have as many tables as...
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.