我感觉在网上应该有一个直接的例子。不幸的是,我一直没有找到。简而言之,我正在通过Yarn导入Bootstrap 4。 Bootstrap 4的一个依赖项是jQuery。这两个依赖项将在我的应用程序的所有页面上使用。因此,我想通过Webpack将它们捆绑在一起。目前,我有以下内容:
然而,当我在页面中访问Webpack时,我看到以下错误:
未捕获的引用错误:jQuery未定义 未捕获的引用错误:$未定义
如何通过Webpack在我的应用程序中打包jQuery和Bootstrap?
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时,我看到以下错误:
未捕获的引用错误:jQuery未定义 未捕获的引用错误:$未定义
如何通过Webpack在我的应用程序中打包jQuery和Bootstrap?
head
元素中引用bundle。然后我在最后引用jQuery。 - Some User