Пакеты Webpack - это модульные и скрытые библиотеки - PullRequest
Новая
       21

Пакеты Webpack - это модульные и скрытые библиотеки

0 голосов
/ 06 ноября 2019

Итак, пакеты Webpack являются модульными. Либо я делаю это неправильно, либо это заставляет разработчиков использовать только 1 огромный пакет. Чтобы уточнить, у меня есть конфигурация Webpack следующим образом: 

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


module.exports = {
    entry: {
        libs: ['./src/libs.js', './src/navbar-shrinker.js']
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            scrollspy: 'scrollspy',
            Tether: 'tether'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        index: 'main.html',
        port: 9000
    }
};

Я хочу использовать Bootstrap. Поэтому я добавляю это к моему libs.js файлу согласно инструкциям на странице Bootsrap, относящимся к Webpack: 

import 'bootstrap'

console.log('loaded');

Я добавляю полученный пакет на свою страницу, и все хорошо. Пакет содержит все Bootstrap js.

Теперь я просто хочу добавить другой скрипт на мою страницу, который также использует Bootstrap (app.js): 

$('button').on('click', function () {
    $(this).popover('show');
});

Я добавлю это нижеbundle на моей странице следующим образом: 

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

Однако, поскольку пакет Webpack является модульным, app.js не имеет доступа к Bootstrap js, который был включен в пакет выше. (В этом отношении он также не может видеть jQuery).

Так что, если в Webpack нет функции, о которой я не знаю, вы должны либо включить весь свой код в комплект, который содержит определенную библиотеку. или включите библиотеку снова в следующий пакет, который ее использует.

Я знаю, что функция externals доступна, и, похоже, это поможет решить эту проблему. Но это зависит от фактической внешней библиотеки, не входящей в комплект.

Мне здесь не хватает функции Webpack, или я разумно изложил статус-кво?

Cheers

...