How To Minify a File In Webpack?

Question

I can't believe I have to ask this question but here we go.

How to minify a file using Webpack 4?

Seems the default likes to add all this garbage.

/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; ...

I simply want a file in and a minified file out. Absolutely no additional garbage added.

Drives me insane, I've tried about 10000 different options in webpack.config.js from searching.

No idea how to turn that crap off.

Can someone point me to that tiny, obscure, hidden configuration option I'm missing

Would be greatly appreciated. thx!

Example:

function webpack_4() { return 'sucks'; }

Should get minified to:

function webpack_4(){return 'sucks'})

And not:

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]);

@Jesper already in production (with minify disabled for testing) ;) Does absolutely nothing. Have tried all modes anyway. — Rob
– Rob, Commented Jan 18, 2020 at 8:43
Aha, but you want the code to be minified a specific way, instead of the normal way, reading the last part of your question. Don't know if such a thing is possible. — Jesper
– Jesper, Commented Jan 18, 2020 at 15:14

Métoule · Accepted Answer · 2020-01-19 09:51:45Z

That's because webpack is a module bundler, and not simply a JS minifier. For that reason, it adds a lot of code to be able to load modules (the part you call garbage :)).

The power of webpack is to bundle all your assets into JS. Imagine you define a widget with JS, HTML and CSS. Without a bundler, you'll have to remember to include all those files whenever you need to use them, via javascript or style tags. When your code grows large, it becomes unmanageable. With webpack, you just need to import one file and everything is done for you.

For example, you can define your style in a CSS file, import it in a JS file:

my-style.css

my-class{ color:red }

my-widget.js

import 'my-style.css' $(document).ready(function () { $(body).append('<p class="my-class">Webpack rules!</p>'); });

my-page.html

<html> <head> <script src="my-widget.js"> </head> <body> </body> </html>

When you load my-page.html with the webpack bundle, the added paragraph will have a red text, because it also loaded the style module, without the need to manually add the style file. That's extremely convenient for any large code base, because you just decide to use a module without worrying about any dependency. There's a trade-off between development convenience and code size.

You can have a look at https://github.com/ronami/minipack to see the inner workings of a bundler. From the comments:

Module bundlers compile small pieces of code into something larger and more complex that can run in a web browser.

To answer your question: if you just need to minify a JS file, then webpack might not be the right tool for you.

Collectives™ on Stack Overflow

How To Minify a File In Webpack?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related