bootstrap 模态框失效 $(...).modal is not a function

Question

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']
}),

代码文件夹

Answer 1

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

webpack代码中写了这个，导致jquery失效，删掉就没问题了

Answer 2

感觉可能是脚本引用顺序不对，你把chunks里面js顺序反过来写一下试试