如何使用 webpack 在 index.html 中包含第三方库，如 jquery 和 bootstrap-table？

Posted 2023-03-08

【中文标题】如何使用 webpack 在 index.html 中包含第三方库，如 jquery 和 bootstrap-table？

【英文标题】：How to include third party libraries like jquery and bootstrap-table in index.html using webpack?

【发布时间】：2018-03-05 02:18:20

【问题描述】：

我看到了有关 webpack 的教程，我能够将所有内容捆绑在 bundle.js 中，并且我能够在 .js 文件中导入 jquery。

在我的应用程序中，我使用的是 ajax、bootstrap-table，所以我需要 index.html 中的 jquery 和 bootstrap-table

使用 webpack 我如何使用 webpack 将这些打包并加载到 html 文件中？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

这是我的 webpack.config.js

var webpack =require('webpack');

module.exports = 
    entry: './app.js',
    output: 
        filename: './bundle.js'
    ,
    node: 
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    ,
    plugins:[
    new webpack.ProvidePlugin(

        $:'jquery',
        jQuery:'jquery'
    )
    ]
;

如果我想在 js 文件中添加 jquery，在我的 nodejs 文件中添加 require('jquery') 但我想在 html 中加载它们？我没有找到很多关于此的材料。如果有人知道请帮忙!!!提前非常感谢!!

【参考方案1】：

你是否也在 app.js 中导入引导程序？

基于当前的设置，bundle 会在你的 webpack 配置文件所在的目录中生成。 如果你已经有你的 html 模板[index.html]，那么你应该在 index.html 中包含捆绑的 js 文件的相对路径

即<script src="./bundle.js"></script>

如果您希望捆绑文件动态包含在您的 index.html 模板中，您应该查看html-webpack-plugin

【讨论】：

我只希望在 index.html 中引导引导。引导在 bundle.js 中可用。所以如果我包含 bundle.js，它应该可以正常工作..它不采用引导表和 jquery..所以我的疑问是我是否应该在 html 中添加任何类似于 require('jquery') 的东西，以便它可以在 html 中使用？@Danny

jquery 和 tether 需要在引导之前加载。在您的 webpack 配置中，您可以输入类似 entry: ['./app.js', 'bootstrap'] 的条目；在app.js 你会有import JQuery from 'jquery'; import Tether from 'tether';