Проблема общего кода в Webpack 4 с Bootstrap 4 - PullRequest
Новая
       9

Проблема общего кода в Webpack 4 с Bootstrap 4

0 голосов
/ 07 июня 2019

У меня есть 2 файла TypeScript, file1.ts и file2.ts.В file1.ts и file2, ts, у меня есть - 

import * as $ from "jquery";
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

I put this in my webpack config -
var config = {
        entry: {
            file1: './src/ts/file1.ts',
            file2: './src/ts/file2.ts'
        },

        mode: appMode,
                optimization: {
              minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: false
                })
            ],

               splitChunks: {
                cacheGroups: {
                    common: {
                        name: 'common',
                        chunks: 'all',
                         minChunks: 2
                    }
                }
            }
        },
     ....
  }

Я не получаю никаких ошибок.Тем не менее, Bootstrap демонстрирует странное поведение, такое как модальный режим не отображается или не закрывается должным образом, и фон отображается в DOM дважды.Я думал, что Webpack может «вычленить» общий код / ​​зависимости.Я делаю это неправильно?

1 Ответ

0 голосов
/ 09 июня 2019

Вам необходимо добавить jquery в ваш webpack.config 

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Popper: ['popper.js', 'default']
        })
    ],
...