使用Webpack与jQuery和Bootstrap 4

Question

使用Webpack与jQuery和Bootstrap 4

3

我感觉在网上应该有一个直接的例子。不幸的是，我一直没有找到。简而言之，我正在通过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时，我看到以下错误：

未捕获的引用错误：jQuery未定义未捕获的引用错误：$未定义

如何通过Webpack在我的应用程序中打包jQuery和Bootstrap？

- Some User

我不确定你是否在使用Webpack，但是在你的页面中jQuery是在哪里被引入的？它必须在第一个调用它的实例之前被引入（也就是在页面的顶部），否则会抛出这个错误。 - Tijmen

1

一旦你在webpack配置中将jQuery设置为插件，就不必再要求它了。 - Rick

我正在页面的head元素中引用bundle。然后我在最后引用jQuery。 - Some User

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1859022 · Answer 1

正如@rick-van-osta所指出的那样：您不需要通过require来加载jquery，因为您已经通过provide插件加载了它（这将创建全局变量$）：

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

从你的app.js中删除行const $ = require('jquery');，然后你就可以继续了。

顺便提一下，bootstrap文档中有一个webpack入口。

另外，由于你正在使用node_modules，所以你应该能够将你的app.js更改为：

require('bootstrap');