尝试用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');
});
答案 0 :(得分:0)
以防万一将来有人遇到相同的问题,我可以在webpack.config.js上使用外部组件解决问题,并将其包含在模块中。出口:
externals: {
'jquery': 'jQuery'
},
使用外部组件时,基本上是在加载外部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>