Question

我已经读过很多关于这个问题的答案，但是我无法解决我的问题，所以我来这里寻求帮助...

这是我的webpack conf文件：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// https://github.com/webpack-contrib/mini-css-extract-plugin
const webpack = require('webpack');
const jquery = require('jquery');

module.exports = {
    mode: 'development',
    entry: './assets/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                        },
                    },
                    {
                        loader:"file-loader",
                        options:{
                            name:'[name].[ext]',
                            outputPath:'images/' //the images will be emited to dist/images/ folder
                        }
                    }
                ],
            },
            {
                // Exposes jQuery for use outside Webpack build
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name]-[id].css',
            ignoreOrder: false,
        }),
        /* Use the ProvidePlugin constructor to inject jquery implicit globals */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery'",
            "window.$": "jquery"
        })
    ],
    /*resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }*/
};

还有我的输入文件app.js：

// Import CSS
import 'bootstrap/dist/css/bootstrap.css';
import '@fortawesome/fontawesome-free/js/all';
import '../css/style.css';

// Import JS
import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

import * as JSZip from 'jszip'; //export xlsx

import 'bootstrap';

//require('webpack-jquery-ui');
//require('webpack-jquery-ui/css');

我一直在尝试不同的解决方案，但是当我在代码中使用jQuery时，仍然得到：

ReferenceError：未定义$

你能帮我吗？

Answer 1

在您的代码中查看此内容

import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

想一想。

。

请注意，您从未定义jQuery。修复它。

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

Answer 2

一种将jquery库添加为外部库的解决方案。第二种解决方案是将jquery添加到包中。

1。外部 webpack.js

externals: {   
  jquery: 'jQuery'
}
plugins: [   new webpack.ProvidePlugin({      
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'    
})]

将jQuery添加到html

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">

在js中添加jQuery

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

2。第二种解决方案，将jquery添加到捆绑软件中。首先，您需要在本地安装jquery。

yarn add -D jquery

在js中添加jQuery

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

这可以使用splitChunks进行优化和拆分，但这是另一个条目的故事；）

我添加了一个外部jquery使用示例

Answer 3

好的，这个错误很愚蠢，在布局的末尾调用了app.js，我试图在视图中使用jQuery，所以在调用之前...

webpack-ReferenceError：未定义$

3 个答案: