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!
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![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...
![Fading Links Using jQuery: dwFadingLinks]()
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
![Web Notifications API]()
Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications. One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience. Apparently the...
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.