jquery - 将 Webpack 与 jQuery 和 Bootstrap 4 结合使用

Question

我觉得网上应该有一个直接的例子。不幸的是，我一直没能找到一个。简而言之，我通过 Yarn 导入 Bootstrap 4。 Bootstrap 4 的依赖项之一是 jQuery。这两个依赖项将在我的应用程序中的所有页面上使用。出于这个原因，我想通过 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']
            },
        ]
    },
}

但是，当我访问页面中的 webpack 时，我看到以下错误:

Uncaught ReferenceError :jQuery 未定义 Uncaught ReferenceError :$未定义

如何通过 Webpack 将 jQuery 和 Bootstrap 捆绑到我的应用程序中？

Answer 1

正如 @rick-van-osta 指出的:你不需要 require jquery，因为你已经通过 Provide 插件加载了它(这将创建全局变量 $):

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

从 app.js 中删除行 const $ = require('jquery'); 就可以了。

bootstrap documentation 中有一个 webpack 条目顺便说一句

此外，由于您正在使用node_modules，您应该能够将 app.js 更改为:

require('bootstrap');