CODEWITHSUNDEEP
javascriptwebpackbundle
Zainul Abideen
Zainul Abideen

Reputation: 1900

Bundle dependent javascript files without require using webpack

I am not sure if it is possible or not. I have a bunch of javascript files, all are dependent on each other.

I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.

So my question is, can I bundle all these files while keeping the dependencies intact.

This is how my HTML looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
    <meta http-equiv="Expires" content="3600">
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>3D BAT</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/jspanel.css" rel="stylesheet" type="text/css">
    <script src="js/lib/three.js"></script>
    <script src="js/lib/controls/MapControls.js"></script>
    <script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
    <script src="js/lib/jquery-2.2.4.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/lib/raphael.js"></script>
    <script src="js/lib/Toast.js"></script>
    <script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/lib/WebGL.js"></script>

    <link href="css/main.css" rel="stylesheet">
    <link href="css/label_tool.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
    <div id="label-tool-wrapper"></div>

    <script src="js/lib/controls/threex.keyboardstate.js"></script>
    <script src="js/lib/SceneUtils.js"></script>
    <script src="js/lib/PCDLoader.js"></script>
    <script src="js/lib/OBJLoader.js"></script>

    <script src="js/lib/controls/OrbitControls.js"></script>
    <script src="js/lib/controls/TransformControls.js"></script>
    <script src='js/lib/controls/PointerLockControls.js'></script>
    <script src='js/lib/controls/KeyboardState.js'></script>
    <script src="js/lib/controls/threex.keyboardstate.js"></script>
    <script src="js/lib/Detector.js"></script>
    <script src="js/lib/stats.min.js"></script>
    <script src='js/lib/dat.gui.js'></script>
    <script src='js/lib/Projector.js'></script>
    <script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
    <script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
    <script src="js/lib/html2canvas.js?ver=1.0"></script>
    <script src="js/lib/base64-binary.js?ver=1.0"></script>
    <script src="js/util/math.js?ver=1.0"></script>
    <script src='js/util/classesBoundingBox.js?ver=1.0'></script>
    <script src='js/util/boundingbox.js?ver=1.0'></script>
    <script src='js/base_label_tool.js?ver=1.0'></script>
    <script src='js/pcd_label_tool.js?ver=1.0'></script>
    <script src="js/image_label_tool.js?ver=1.0"></script>
    <script src='js/util/ajax_wrapper.js?ver=1.0'></script>
    <script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
    <script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
    <div class="current">1/900</div>
    <div class="list-wrapper">
        <div class="frame-selector__frames"></div>
    </div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
    labelTool.start();
</script>
</html>

in the above code script tag order is important since files are dependent on each other. Can I bundle all these files into one without making any change into the current js files?

Upvotes: 0

Views: 636

Answers (1)

Quentin
Quentin

Reputation: 943142

If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)

This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.

e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.

So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).

uglifyjs input.js other-input.js more-input.js --output combined.js -c

Upvotes: 1

Related Questions