jQueryとブートストラップでWebpackを使用する4

Question

オンラインのどこかでまっすぐな例があるはずです。残念ながら、私は見つけられませんでした。要するに、私はYarn経由でBootstrap 4をインポートしています。 Bootstrap 4の依存関係の1つはjQueryです。これらの2つの依存関係は、アプリケーションのすべてのページで使用されます。そのため、私はWebpackを介して一緒にバンドルしたいと思っていました。現在、私は次のようしている：

app.jsその後

// Import jQuery 
const $ = require('jquery'); 

// Import Bootstrap 
require('bootstrap/dist/css/bootstrap.min.css'); 

は、私のwebpack.config.jsファイルで、私は次のようしている：

webpack.config.jsを

"use strict"; 

const path = require('path'); 

const webpack = require('webpack'); 

module.exports = { 
    entry: { 
     app: './src/js/app.js', 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }), 
     new webpack.optimize.CommonsChunkPlugin({ name: 'common' }), 
     new webpack.optimize.UglifyJsPlugin() 
    ], 
    output: { 
     publicPath: "/js/", 
     path: path.join(__dirname, '/dist/js/'), 
     filename: '[name].bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /(node_modules)/, 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['style-loader', 'css-loader'] 
      }, 
     ] 
    }, 
} 

ただし、自分のページでウェブパックを訪問すると、次のエラーが表示されます。

キャッチされないにReferenceError：jQueryのは 捕捉されないにReferenceErrorが定義されていない：$は、私はWebPACKのを経由して私のアプリでjQueryとブートストラップをバンドルするにはどうすればよい

が定義されていませんか？ @リック・バン - OSTAとして

Answer 1

が指摘：あなたはすでに提供プラグイン経由でロードされたので、あなたはjqueryのを要求する必要はありません（これはグローバル変数$を作成します）：

new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }), 

あなたのapp.jsからconst $ = require('jquery');行を削除してください。

WebPACKのエントリあなたはnode_modulesを使用しているので、あなたがあなたのapp.jsを変更することができるはずもbootstrap documentationところで

にあります：私はわからないんだけど

require('bootstrap');