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

Question

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

在我的应用我使用AJAX，引导表，所以我需要在index.html的

使用的WebPack我如何包装和使用的WebPack在HTML文件中加载这些jQuery和引导表？

<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

变种的WebPack =要求（ '的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？我没有找到关于这么多的材料。如果有人知道请帮助!!!预先感谢很多！

Answer 1

你是否也在app.js里导入bootstrap？

根据当前设置，该软件包将在您拥有webpack配置文件的目录中生成。 如果你已经有你的HTML模板[index.html的]，那么你应该包括的index.html

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

其他捆绑的js文件的相对路径，如果你想捆绑的文件是动态地包含在你的index.html模板中，你应该看看html-webpack-plugin

Answer 2

为了添加外部库，我们可以使用这个HtmlWebpackExternalsPlugin。我们应该在我们的webpack.config.js文件中添加这个。

因此，这HtmlWebpackExternalsPlugin将创建供应商文件夹，并在其中添加缩小的文件。它还会将缩小文件路径添加到index.html库中，类似于此<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>

这是我的webpack.config.js文件。

在这里，我已经包括了jQuery，引导表，引导库

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var bootstrapEntryPoints = require('./webpack.bootstrap.config.js'); 
var path = require("path"); 
var webpack = require('webpack'); 
var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); 
var bootstrapConfig =bootstrapEntryPoints.prod; 
module.exports={ 
    entry:{app:['./app.js','./public/app.css'], 
    //vendor: './app/vendor.ts' 
    bootstrap:bootstrapConfig 

    }, 
    output:{ 
    path:__dirname+ '/public/', 
    filename:'[name].bundle.js'}, 
     node: { 
     fs: 'empty', 
     net: 'empty', 
     tls: 'empty' 
    }, 
    module:{ 
     rules:[ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: 'babel-loader' 
      }, 

      { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader' ] }) }, 
      { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, 
      { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' }, 
      { test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, loader: 'imports-loader?jQuery=jquery' } 
     ] 

    }, 
    plugins: [ 

     new HtmlWebpackPlugin({ 
     title: 'Monitoring Status', 
     minify:{collapseWhitespace:true 
     }, 
     hash:true, 
     template: 'views/index.ejs' // Load a custom template (ejs by default see the FAQ for details) 

     }), 
     new HtmlWebpackExternalsPlugin({ 
      externals: [ 
      { 
       module: 'jquery', 
       entry: 'dist/jquery.min.js', 
       global: 'jQuery', 
      }, 
      ], 
     }), 
     new HtmlWebpackExternalsPlugin({ 
      externals: [ 
      { 
       module: 'bootstrap', 
       entry: ['dist/css/bootstrap.min.css','dist/js/bootstrap.min.js'] 
      }, 
      ], 
    }), 
    new HtmlWebpackExternalsPlugin({ 
     externals: [ 
      { 
       module: 'bootstrap-table', 
       entry: ['dist/bootstrap-table.min.css','dist/bootstrap-table.min.js'] 
      }, 
      ], 
    }), 
     new ExtractTextPlugin({ 
      filename:'css/[name].css', 
      allChunks:true 
     }) 

] 
}