2017-10-12 321 views
0

我覺得應該有一個直接在線的例子。不幸的是,我找不到一個。總之,我通過Yarn導入Bootstrap 4。 Bootstrap 4的一個依賴是jQuery。這兩個依賴項將在我的應用程序的所有頁面上使用。出於這個原因,我想通過Webpack將它們捆綁在一起。目前,我有以下幾點:在jQuery和Bootstrap中使用Webpack 4

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'] 
      }, 
     ] 
    }, 
} 

但是,當我訪問我的頁面中的一個webpack時,我看到以下錯誤:

未捕獲的ReferenceError:未定義的jQuery 未捕獲的ReferenceError:$沒有定義

如何通過的WebPack捆綁jQuery和引導在我的應用程序?

+0

我不知道Webpack,但你的頁面上包含jQuery的地方?它必須在第一個實例被調用之前被包含(比如在頁面中更高的位置),否則它會拋出這個錯誤。 – Tijmen

+1

一旦將它設置爲webpack配置中的插件,就不需要使用jQuery。 –

+0

我正在引用頁面的head元素中的包。然後我在最後引用jQuery。 –

回答

0

正如@裏克麪包車,OSTA指出:你不需要jQuery的要求,因爲你已經通過提供插件加載它(這將創建全局變量$):

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

從你的app.js中刪除行const $ = require('jquery');,你應該很好去。

沒有在bootstrap documentation BTW

也因爲使用的是node_modules,你應該能夠改變你的app.js到的WebPack進入

require('bootstrap'); 
相關問題