Webpack

Here is configuration of Webpack that can be use to bundle dependencies.

First you need to install dependencies (of course you need first node and npm installed and run npm init to initialize your app):

npm install --save-dev webpack css-loader style-loader expose-loader

Then create webpack.config.js with this content (tested in webpack 4.30.0).

const path = require('path');
module.exports = {
    mode: "production",
    entry: "./index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname)
    },
    module: {
        rules: [
            {
                test: () => true, // disable tree shaking for all file, we want whole libraries
                sideEffects: true
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

Then you install your packages using npm and you can import them from your index.js (including css files):

require('expose-loader?CodeMirror!codemirror/lib/codemirror');
require('expose-loader?jQuery!jquery');
require('jquery.terminal');
require('jquery.splitter');
require('expose-loader?Prism!prismjs');
require('prismjs/components/prism-scheme.min');
require('prismjs/themes/prism-coy.css');
require('jquery.terminal/js/prism');
require('expose-loader?git!isomorphic-git');
require('expose-loader?LightningFS!../../lightning-fs');
require('jquery.terminal/css/jquery.terminal.min.css');
require("codemirror/lib/codemirror.css");
require('codemirror/mode/scheme/scheme');
require("codemirror/addon/edit/matchbrackets");
require("codemirror/mode/css/css");
require("codemirror/theme/twilight.css");
require('codemirror/mode/css/css');

with expose-loader you make sure that the name is accessible from LIPS as global variable. Then you include your bundle.js as script tag (you can also include LIPS itself - not tested):

<script src="bundle.js"></script>

and inside your LIPS file you can use those libraries.

css-loader style-loader will ensure that you can bundle CSS files (alow to requrie them in your JS file).

Images in CSS

if CSS files have references to url() then you need to do something with those files, otherwise you will get error either from webpack or from app when you run it. If your css have url() use this rule:

module.exports = {
    ...
    module: {
        rules: [
            {
                test: () => true,
                sideEffects: true
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {}
                }]
            }
         ]
    }
}

See file-loader repo for details.

Code Splitting

If your bundle is too big (more then 800KB - webpack will warn you about bundles larger then 250KB) you can code split the bundles. Easiest is to just do this by hand. Just create two files src/a.js and src/b.js (or more, you can also name them differently) and some require put in one and some in the other. Then use this webpack config file:

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

module.exports = {
    mode: "production",
    entry: {
        'a': "./src/a.js",
        'b': "./src/b.js"
    },
    output: {
        filename: 'bundle-[name].js',
        path: path.resolve(__dirname)
    },
    module: {
        rules: [
            {
                test: () => true,
                sideEffects: true
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

This file will generate 2 bundles: bundle-a.js and bundle-b.js.