jquery - 使用 Webpack4 加载 JQuery
问题描述
我在尝试使用 Webpack 4 加载 JQuery 时遇到了很多问题。当我检查控制台以查看 JQuery 是否正常工作时,我总是收到“未定义 jQuery”错误消息。
这是我的 webbpack.config.js:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname, 'src/js/scripts.js'),
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
//JQUERY
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
},
//FONTS
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader?limit=50000&name=fonts/[name].[ext]',
}
]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{ loader: 'file-loader?limit=50000&name=fonts/[name].[ext]'}
]
},
//JS
{
//Tipo de Archivo quiero reconocer
test: /\.js$/,
exclude: /node_modules/,
//Que Loader se encarga del tipo de extension de archivo
use: {
loader: 'babel-loader',
options: {
presets:['babel-preset-env']
}
},
},
//IMAGES
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'img/',
name:'[name].[ext]',
}
}
},
//SASS
{
test: /\.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename:'css/style.min.[contenthash].css',
}),
new HtmlWebpackPlugin ({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery',
}),
new WebpackMd5Hash()
]
}
如您所见,我正在使用暴露加载程序和 ProvidePlugin 来尝试完成此操作。所以这就是我试图在我的 index.js 中导入 JQuery 的方式:
import '../styles/style.scss';
import 'bootstrap';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
require.context("../img/", true, /\.(png|svg|jpg|gif)$/);
require("expose-loader?$!jquery");
require("style-loader!css-loader!sass-loader!./font-awesome-sass-styles.loader!./font-awesome-sass.config.js");
$( document ).ready(function() {
console.log('Hello World from JQuery');
});
解决方案
以防万一将来有人遇到同样的问题,我可以在我的 webpack.config.js 上使用外部解决问题,请将其包含在您的模块中。出口:
externals: {
'jquery': 'jQuery'
},
当你使用 externals 时,你基本上是在加载一个外部 CDN,所以你必须将它包含在你的 .html 文件中(确保将它放在你的 Webpack bundle js 调用之前,否则它将不起作用)。
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>">
<script>
推荐阅读
- ios - 带有 Timer.scheduledTimer 的 EXC_BAD_ACCESS
- python - 使用 matplotlib 在 qiskit 中可视化电路
- nlp - 在 Dialogflow 中连接实体
- html - 从下拉选择和按钮单击重定向到页面
- python - 如何在异常超时后重试并从字典中删除?
- javascript - 如果值未定义并且在新对象上使用“in”运算符,则 JS 对象解构/重组是不安全的。如何解决这个问题?
- python - 将一个列表的每个索引与同一列表的每个其他索引进行比较的最佳方法
- android - 找不到符号 String token = task.getResult().getToken();
- python - 如何将字符串转换为输入函数中输入的整数?
- sql - 错误:类型间隔的无效输入语法