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

因此,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功能,或者我是否已经合理设定了现状?

欢呼

wanglin1967 回答:Webpack捆绑包是模块化和隐藏的库

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3153849.html

大家都在问