Как в webpack оставить только свой код?

Question

[Станислав]

Webpack добавляет лишний код при сборке (файл с кодом пустой), на выходе получаю

!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};t.m=n,t.c=r,t.d=function(n,r,e){t.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},t.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(r,"a",r),r},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=1)}([,function(n,t,r){r(2),n.exports=r(3)},function(n,t){},function(n,t){}]);

Вот конфиг

'use strict';

const path = require('path')
const webpack = require('webpack')

module.exports = {
    context: path.join(__dirname, './static/'),
    entry: {
        'utils.min.js': './ajax/utils.js',
        'async.min.js': [
            './ajax/async.js',
            './ajax/async2.js'
        ]
    },
    output: {
        path: path.join(__dirname, './static/assets'),
        filename: "[name]"
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    ]
};

Answer 1

[Константин Китманов]

Никак, все бандлеры имеют оверхед.
Раньше на сайте webpack была табличка, в которой указывалось, что у него самый маленький оверхед.

Comments

[Станислав]

Как тогда быть с глобальными переменными?
У меня есть следующий код

var ASYNC = function() {
    function e() {
        console.log('1')
    }
}();
!function() {
    function i() {
        console.log('2')
    }
}

Как можно сделать его функции глобальными? Что бы можно было использовать их в других файлах?
Сейчас в гугл консольке наблюдаю Uncaught ReferenceError: ASYNC is not defined
Из за этой обвертки...

[Константин Китманов]

Станислав, очень не стоит полагаться на глобальные переменные вообще.

В вашем случае лучше всего добавить library: 'ASYNC', libraryTarget: 'umd' или library: 'ASYNC', libraryTarget: 'window' в output. Можно даже library: 'ASYNC', libraryTarget: 'var', но я не рекомендую. Прочитав, разумеется, документацию: https://webpack.js.org/guides/author-libraries/

[Станислав]

Константин Китманов, у меня просто есть банальный набор функций которые я часто использую в других подгружаемых файлах, к примеру работа со строками, чтобы ее не дублировать во всех файлах и уменьшить их вес, у меня есть специальный файл utils.js, я размещаю его выше остальных файлов и получаю доступы к его функциям, как по мне это очень удобно. Мне нужно только минификация основного файла как раньше я делал это с помощью gulp. А другие файлы мне нужно склеивать и так же минифицировать без каких либо манипуляций с ними. Обратно возвращаться на gulp?

[Константин Китманов]

Станислав, ясно.
Ну webpack не для конкатенации файлов в лоб, да. Можно оставлять всё как есть, если вас устраивает.

[Mesuti]

Разработчики обещали убрать лишний код в Webpack 5.
Но так и не убрали.
В итоге, самую чистую сборку делает gulp