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

我看到了關於webpack的教程，並且我能夠將bundle中的所有內容捆綁到一起，並且我可以在.js文件中導入jquery。如何使用webpack在index.html中包含第三方庫，如jquery和bootstrap-table？

在我的應用我使用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？我沒有找到關於這麼多的材料。如果有人知道請幫助!!!預先感謝很多！

來源

2017-09-23 Ramya S

你是否也在app.js裏導入bootstrap？

根據當前設置，該軟件包將在您擁有webpack配置文件的目錄中生成。如果你已經有你的HTML模板[index.html的]，那麼你應該包括的index.html

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

其他捆綁的js文件的相對路徑，如果你想捆綁的文件是動態地包含在你的index.html模板中，你應該看看html-webpack-plugin

來源

2017-09-23 18:20:19

我想引導只在index.html.Bootstrap在bundle.js.So可如果我有bundle.js它應該工作沒有引導表和jquery ..所以我的疑問是我應該添加類似於要求（'jquery'）在HTML中，以便它可以在HTML？@Danny –

jquery和繫繩需要在引導之前加載。在你的webpack配置中，你可以輸入'entry：['./app.js'，'bootstrap']'; in'app.js'你會有 '從'jquery'導入JQuery;從'繫繩'進口繫繩;' –

爲了添加外部庫，我們可以使用這個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 
     }) 

] 
}

來源

2017-09-25 07:15:09

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

回答

相關問題