Как минимизировать файл в Webpack? - PullRequest
Новая
       13

Как минимизировать файл в Webpack?

4 голосов
/ 18 января 2020

Не могу поверить, что мне нужно задать этот вопрос, но здесь мы go.

Как минимизировать файл с помощью Webpack 4?

Кажется, по умолчанию нравится добавлять все это фигня. 

/******/ (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: {}
/******/                };

...

Я просто хочу, чтобы файл вошел и минимизированный файл. Абсолютно никакого дополнительного мусора не добавлено.

сводит меня с ума, я пробовал около 10000 различных опций в webpack.config. js из поиска.

Не знаю, как отключить это дерьмо.

Может кто-нибудь указать мне на этот крошечный, скрытый, скрытый параметр конфигурации, который мне не хватает

Буду очень признателен. thx!

Пример: 

function webpack_4() {
    return 'sucks';
}

Должен быть уменьшен до: 

function webpack_4(){return 'sucks'})

А не: 

!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){}]);

1 Ответ

1 голос
/ 19 января 2020

Это потому, что webpack - это пакет модулей, а не просто JS minifier. По этой причине он добавляет много кода для загрузки модулей (часть, которую вы называете garbage:)).

Сила webpack заключается в объединении всех ваших ресурсов в JS. Представьте, что вы определяете виджет с JS, HTML и CSS. Без упаковщика вам придется не забывать включать все эти файлы всякий раз, когда вам нужно их использовать, с помощью тегов javascript или style. Когда ваш код становится большим, он становится неуправляемым. В веб-пакете вам просто нужно импортировать один файл, и все готово для вас.

Например, вы можете определить свой стиль в файле CSS, импортировать его в файл JS:

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>

Когда вы загружаете my-page.html с пакетом webpack, добавленный абзац будет иметь красный текст, потому что он также загружал модуль стиля, без необходимости вручную добавить файл стиля. Это чрезвычайно удобно для любой большой базы кода, потому что вы просто решаете использовать модуль, не беспокоясь о какой-либо зависимости. Существует компромисс между удобством разработки и размером кода.

Вы можете взглянуть на https://github.com/ronami/minipack, чтобы увидеть внутреннюю работу упаковщика. Из комментариев:

Компоненты модуля компилируют небольшие фрагменты кода во что-то большее и более сложное, которое может работать в веб-браузере.

Чтобы ответить на ваш вопрос : если вам просто нужно минимизировать файл JS, то webpack может не подойти вам.

...