我覺得應該有一個直接在線的例子。不幸的是,我找不到一個。總之,我通過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和引導在我的應用程序?
我不知道Webpack,但你的頁面上包含jQuery的地方?它必須在第一個實例被調用之前被包含(比如在頁面中更高的位置),否則它會拋出這個錯誤。 – Tijmen
一旦將它設置爲webpack配置中的插件,就不需要使用jQuery。 –
我正在引用頁面的head元素中的包。然後我在最後引用jQuery。 –