Django Webpack загрузчик для стати c библиотек

Question

У нас есть приложение django, и мы хотим собрать все наши библиотеки stati c javascript через npm и веб-пакет вместо загрузки их через cdn.

Это наш пакет. json для управления библиотеками и установки.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack --config webpack.config.js --mode production"
  },
  "author": "Florian Eichin",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "bower": "^1.8.8",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.6",
    "webpack-bundle-tracker": "^1.0.0-alpha.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.4.1",
    "jquery-form": "^4.2.2",
    "jquery-ui": "^1.12.1",
    "js-cookie": "^1.5.0",
    "popper.js": "^1.16.1",
    "select2": "^4.0.13",
  }
}

У нас есть индекс. js, куда мы импортируем все такие зависимости:

global.$ = require("jquery");
global.jQuery = require("jquery");

import('jquery/dist/jquery.min.js')
import('jquery-form/dist/jquery.form.min.js')
import('jquery-ui')
import('js-cookie/src/js.cookie.js')
import('select2/dist/js/select2.full.min.js')
import('select2/dist/js/i18n/de.js')

import('popper.js/dist/popper.min.js')
import('bootstrap/dist/js/bootstrap.min.js')

Все файлы затем собрал через веб-пакет. Конфигурация для этого выглядит следующим образом:

const webpack = require('webpack');
const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    entry: {index: './assets/js/index.js'},
    stats: {
        entrypoints: true
    },
    output: {
        path: path.resolve('./assets/bundles/'),
        publicPath: 'http://localhost:8000/static/bundles/',
        filename: '[name]-[hash].js',
        chunkFilename: "[name]-[hash].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
        }),
        new BundleTracker({
            path: __dirname,
            filename: './webpack-stats.json'
        }),
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }, {
                test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)$/i,
                use: 'file-loader',
            },
        ]
    }
};

Чтобы загрузить все в django и статические файлы, мы используем webpackloader . Все работает, как и ожидалось, но я думаю, что javascript файлы загружаются асинхронно, и поэтому возникают случайные ошибки импорта. Часто возникают ошибки, такие как

foo не является функцией

и так далее. Но это появляется случайно. При каждой перезагрузке отсутствует еще одна Зависимость. Таким образом, есть несколько вопросов по этому вопросу.

• Это хорошая идея, управлять такими библиотеками js?
• Есть ли другие надежные решения?
• Есть ли возможность загрузить js синхронно перед выполнением кода приложения?