как в webpack при билде сделать читаемый js?

178
05 января 2019, 12:00

Можно ли избавиться от webpack модулей в main.js?
Или есть ещё какие-то методы , чтобы сделать мой код на выходе читаемым?
Добавил свой пример и то что получается на выходе.
В конфиге по дефолту встроен jquery и бандл разбивается на vendors.js и main.js

module.exports = function () { 
  return { 
    //.. 
    optimization: { 
      splitChunks: { 
        chunks: 'all', 
        minSize: 0 
      }, 
      minimizer: [ 
        //сжатие файлов *.min.js ,в моем случае файлов, из node_modules 
        new UglifyJsPlugin({ 
          sourceMap: true, 
          include: /\.min\.js$/, 
        }), 
         //настройки сжатия для моего кода 
        new UglifyJsPlugin({ 
          sourceMap: true, 
          uglifyOptions: { 
            compress: false, 
            mangle: false, 
            output: { beautify: true }, 
          }, 
          include: /\.js$/, 
          exclude: /\.min\.js$/ 
        }), 
      ] 
  }, 
  plugins: [ 
    new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
    }) 
  ] 
  } 
}

В моем файле
// main.js
$(document).ready(function () {console.log('1')})
А на выходе:

(function(modules) { 
    function webpackJsonpCallback(data) { 
        var chunkIds = data[0]; 
        var moreModules = data[1]; 
        var executeModules = data[2]; 
        var moduleId, chunkId, i = 0, resolves = []; 
        for (;i < chunkIds.length; i++) { 
            chunkId = chunkIds[i]; 
            if (installedChunks[chunkId]) { 
                resolves.push(installedChunks[chunkId][0]); 
            } 
            installedChunks[chunkId] = 0; 
        } 
        for (moduleId in moreModules) { 
            if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 
                modules[moduleId] = moreModules[moduleId]; 
            } 
        } 
        if (parentJsonpFunction) parentJsonpFunction(data); 
        while (resolves.length) { 
            resolves.shift()(); 
        } 
        deferredModules.push.apply(deferredModules, executeModules || []); 
        return checkDeferredModules(); 
    } 
    function checkDeferredModules() { 
        var result; 
        for (var i = 0; i < deferredModules.length; i++) { 
            var deferredModule = deferredModules[i]; 
            var fulfilled = true; 
            for (var j = 1; j < deferredModule.length; j++) { 
                var depId = deferredModule[j]; 
                if (installedChunks[depId] !== 0) fulfilled = false; 
            } 
            if (fulfilled) { 
                deferredModules.splice(i--, 1); 
                result = __webpack_require__(__webpack_require__.s = deferredModule[0]); 
            } 
        } 
        return result; 
    } 
    var installedModules = {}; 
    var installedChunks = { 
        0: 0 
    }; 
    var deferredModules = []; 
    function __webpack_require__(moduleId) { 
        if (installedModules[moduleId]) { 
            return installedModules[moduleId].exports; 
        } 
        var module = installedModules[moduleId] = { 
            i: moduleId, 
            l: false, 
            exports: {} 
        }; 
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
        module.l = true; 
        return module.exports; 
    } 
    __webpack_require__.m = modules; 
    __webpack_require__.c = installedModules; 
    __webpack_require__.d = function(exports, name, getter) { 
        if (!__webpack_require__.o(exports, name)) { 
            Object.defineProperty(exports, name, { 
                enumerable: true, 
                get: getter 
            }); 
        } 
    }; 
    __webpack_require__.r = function(exports) { 
        if (typeof Symbol !== "undefined" && Symbol.toStringTag) { 
            Object.defineProperty(exports, Symbol.toStringTag, { 
                value: "Module" 
            }); 
        } 
        Object.defineProperty(exports, "__esModule", { 
            value: true 
        }); 
    }; 
    __webpack_require__.t = function(value, mode) { 
        if (mode & 1) value = __webpack_require__(value); 
        if (mode & 8) return value; 
        if (mode & 4 && typeof value === "object" && value && value.__esModule) return value; 
        var ns = Object.create(null); 
        __webpack_require__.r(ns); 
        Object.defineProperty(ns, "default", { 
            enumerable: true, 
            value: value 
        }); 
        if (mode & 2 && typeof value != "string") for (var key in value) __webpack_require__.d(ns, key, function(key) { 
            return value[key]; 
        }.bind(null, key)); 
        return ns; 
    }; 
    __webpack_require__.n = function(module) { 
        var getter = module && module.__esModule ? function getDefault() { 
            return module["default"]; 
        } : function getModuleExports() { 
            return module; 
        }; 
        __webpack_require__.d(getter, "a", getter); 
        return getter; 
    }; 
    __webpack_require__.o = function(object, property) { 
        return Object.prototype.hasOwnProperty.call(object, property); 
    }; 
    __webpack_require__.p = ""; 
    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 
    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); 
    jsonpArray.push = webpackJsonpCallback; 
    jsonpArray = jsonpArray.slice(); 
    for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 
    var parentJsonpFunction = oldJsonpFunction; 
    deferredModules.push([ 0, 1 ]); 
    return checkDeferredModules(); 
})([ function(module, exports, __webpack_require__) { 
    __webpack_require__(1); 
    module.exports = __webpack_require__(5); 
}, function(module, __webpack_exports__, __webpack_require__) { 
    "use strict"; 
    __webpack_require__.r(__webpack_exports__); 
    (function($) { 
        var _styles_main_sass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); 
        var _styles_main_sass__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_styles_main_sass__WEBPACK_IMPORTED_MODULE_0__); 
        $(document).ready(function() { 
            console.log("1"); 
        }); 
    }).call(this, __webpack_require__(2)); 
}, , function(module, exports, __webpack_require__) {} ]); 
//# sourceMappingURL=main.0.js.map

Answer 1
    //сжатие файлов *.min.js ,в моем случае файлов, из node_modules
    new UglifyJsPlugin({
      sourceMap: true,
      include: /\.min\.js$/,
    }),

Зачем вы сжимаете файлы, которые уже и так сжаты?

   new UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        compress: false,
        mangle: false,
        output: { beautify: true },
      },
      include: /\.js$/,
      exclude: /\.min\.js$/
    }),

Чем вам соурсмапы не подошли? Вы в любом случае получите нечитаемый код, так как минифицируете его.

То что добавляет вебпак - это реализация модуля и ленивой подгрузки. Это необходимый код, иначе ваши модули не будут работать. Не обращайте на это внимание. Посмотреть ваш код вы можете во вкладке source девтулзов, там будет папочка с исходным кодом

READ ALSO
Vue.js использование refs

Vue.js использование refs

Всем привет ,как будет выглядеть если явную работу с DOM тут заменить на refs? У меня что-то не выходит так заменить

146
&ldquo;поделиться&rdquo; от Яндекса data-url не работает

“поделиться” от Яндекса data-url не работает

В data-url ссылка на конкретный объект, однако "поделиться" срабатывает на всю страницу

188
Перезагрузить модуль NodeJs

Перезагрузить модуль NodeJs

У меня есть файл comp1js, я запускаю его require("

189