Question

因此，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。因此，按照与Webpack有关的Bootsrap页面上的说明，将其添加到我的libs.js文件中：

import 'bootstrap'

console.log('loaded');

我将结果包添加到我的页面，一切顺利。该捆绑软件包含所有Bootstrap js。

现在，我只想向页面添加另一个脚本，该脚本也使用Bootstrap（app.js）：

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

我将其添加到页面上的捆绑包下方：

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

但是，因为Webpack捆绑包是模块化的，所以app.js无法访问上面捆绑包中包含的Bootstrap js。（就此而言，它也看不到jQuery）。

因此，除非Webpack中有我不知道的功能，否则您要么必须将所有代码都包含在包含特定库的包中，要么就必须在使用该库的下一个束中再次包含该库。

我知道externals功能可用，这似乎可以解决该问题。但这确实取决于实际的外部库不在捆绑中。

我是否在这里缺少Webpack功能，或者我是否已经合理设定了现状？

欢呼

Webpack捆绑包是模块化和隐藏的库

0 个答案: