Webpack 2 jqueryとブートストラップのロード、公開、バンドル化

Question

これは少々尋ねられていますが、誰も回答を決めることができないようです。 jquery THENブートストラップをバンドルして、$,JQueryおよびbootstrapをグローバルに公開することは非常に簡単です。

はここでこれが適切にバンドル私webpack.config.js

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     accountdetails: './src/main/webapp/public/js/accountdetails.js', 
     vendor_jquerybs: ['jquery', 'bootstrap'] 
    } 
    , 
    module:{ 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node-modules/, 
      loader: 'babel-loader' 
     }] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/src/main/webapp/public/js/dist', 
     publicPath: '/', 
     filename: '[name].bundle.js' 
    }, 
    devServer: { 
     contentBase: './dist' 
    } 
}; 

です。 に私の最初のファイルとして<script>がロードされますが、「$が定義されていません」、「jQueryが定義されていません」などのコンソールの問題が発生します。

jQuery/$とブートストラップをグローバルに公開するにはどうすればよいですか？ Webpackのドキュメントには、CommonChunksPlugin、expose-loaderなどがあります。これを行うにはどうすればよいですか？私はドキュメントによって非常に混乱しています。

ありがとうございます。答えはここにhttps://github.com/webpack-contrib/expose-loader

モジュールがexpose-loaderであると明らかにウィンドウにオブジェクト、クラス、などを公開するために必要とされるが見つかり

Answer 1

。

module: { 
    rules: [{ 
      test: require.resolve('jquery'), 
      use: [{ 
       loader: 'expose-loader', 
       options: 'jQuery' 
      },{ 
       loader: 'expose-loader', 
       options: '$' 
      }] 
     }] 
} 

注：私が間違っている場合は訂正してください。ただし、ブートストラップをグローバルに公開する必要はありません。 jQueryで十分です。今

全設定：

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     accountdetails: './src/main/webapp/public/js/accountdetails.js', 
     vendor_jquerybs: ['jquery', 'bootstrap'] 
    } 
    , 
    module:{ 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /node-modules/, 
      loader: 'babel-loader' 
      }, 
      { 
      test: require.resolve('jquery'), 
      use: [{ 
       loader: 'expose-loader', 
       options: 'jQuery' 
       }, 
       { 
       loader: 'expose-loader', 
       options: '$' 
       }] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/src/main/webapp/public/js/dist', 
     publicPath: '/', 
     filename: '[name].bundle.js' 
    }, 
    devServer: { 
     contentBase: './dist' 
    } 
}; 

注：エントリポイントから 'jqueryの' を削除することはできません。