javascript - webpack - ReferenceError: $ 未定义
问题描述
我已经阅读了很多关于这个问题的答案,但我无法解决我的问题,所以我来这里寻求帮助......
这是我的 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: $ 未定义
你能帮帮我吗?
解决方案
在你的代码中看看这个:
import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;
想一想。
.
.
.
.
.
.
.
.
.
.
.
.
请注意,您从未定义jQuery
. 修理它。
import $ from 'jquery';
window.$ = $;
window.jQuery = $;
推荐阅读
- php - 将 AsciiMath 解析为 Python 表达式
- python - 清理抓取结果以返回锚文本,而不是 HTML
- python - 建立哈里斯角检测器输出的连接图
- python - Pandas dataframe.corr() 从输入中剥离列
- android - 所有 com.android.support 库必须使用完全相同的版本 'com.android.support:appcompat-v7:28.0.0-rc01'
- python - Python Flask 将下拉值输出到页面
- ios - 为什么 iOS 通用链接在 12.2 中停止工作
- java - Spring Boot 显示对索引的 http 请求,但不显示任何其他映射
- elasticsearch - 如何使用elasticsearch正确处理多词同义词扩展?
- powershell - Office 365 电子邮件统计