webpackを使用してindex.htmlにjqueryやbootstrap-tableなどのサードパーティライブラリを含めるにはどうすればよいですか？

Question

webpackに関するチュートリアルを見て、bundle.jsのすべてをバンドルでき、jqueryファイルを.jsファイルにインポートできます。

私のアプリケーションでは、私は、AJAX、ブートストラップ・テーブルを使用していますので、私はパックとのWebPACKを使用してHTMLファイルにこれらを読み込むことができる方法のWebPACKを使用してindex.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ある

のvarのWebPACK =必要（ 'WebPACKの'）;私nodejsで

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のをしたい場合は、私がrequire('jquery')を追加しているファイルが、私は、HTMLのものをロードするようにしたいですか？私はこのに関する多くの資料を見つけることができませんでした。もし誰かが助けてください知っている!!!多くの事前に感謝！

Answer 1

あなたもapp.js内でブートストラップをインポートしていますか？

現在の設定に基づいて、バンドルは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ファイルです。

私はそれが動作するはずbundle.js含まれている場合、ここで私は、私はindex.html.Bootstrapにのみブートストラップたい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 
     }) 

] 
}