鍍金池/ 問答/數(shù)據(jù)庫  網(wǎng)絡(luò)安全  HTML/ bootstrap 模態(tài)框失效 $(...).modal is not a fu

bootstrap 模態(tài)框失效 $(...).modal is not a function

webpack打包，jquery放在了bootstrap前面，還是報錯，為什么?

js

$('#lastPageModal').modal();

本地html

<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<script src="../lib/bootstrap.min.js"></script>
<script src="../lib/jqthumb.js"></script>
<script src="../lib/jqthumb.min.js"></script>
    <!--當前是最后一頁-->
    <div class="modal" tabindex="-1" role="dialog" id="lastPageModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>當前是最后一頁。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">確定</button>
                </div>
            </div>
        </div>
    </div>

dist/html

<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<script src="../lib/bootstrap.min.js"></script>
<script src="../lib/jqthumb.js"></script>
<script src="../lib/jqthumb.min.js"></script>

webpack

new htmlWebpackPlugin ({
    filename:'index.html',
    template:'index.html',
    inject:'body',
    chunks:['index']
}),

代碼文件夾

clipboard.png

回答
編輯回答
青裙

感覺可能是腳本引用順序不對，你把chunks里面js順序反過來寫一下試試

2018年7月26日 12:37
編輯回答
夢一場
new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
        })

webpack代碼中寫了這個，導致jquery失效，刪掉就沒問題了

2017年6月9日 06:18