0

Формирую через webpack html страницу form-elements.html. Подключаю в JS файле данной страницы плагин item-quantity-dropdown:

import $ from "jquery";
import './form-elements.scss'
import 'item-quantity-dropdown/lib/item-quantity-dropdown.min';
import 'item-quantity-dropdown/lib/item-quantity-dropdown.min.css';

$(document).ready(() => {
  $('.iqdropdown').iqDropdown({});
});

Файл webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

let globule = require('globule');
let mode = 'development';
if ( process.env.NODE_ENV === 'production' ) {
  mode = 'production'
}
console.log(mode + ' mode');

const paths = globule.find(["src/pages/**/*.pug"])

module.exports = {
  mode: mode,
  entry: {
    'colors-types': './src/pages/colors-types/colors-types.js',
    'form-elements': './src/pages/form-elements/form-elements.js',
  },
  output: {
    filename: '[name],[contenthash].js',
    assetModuleFilename: "assets/[hash][ext][query]",
    clean: true,
  },
  devtool: 'source-map',
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      '$': 'jquery',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
}),
  //   new HtmlWebpackPlugin({
  //   template: "./src/pages/colors-types/colors-types.pug"
  // }),
    ...paths.map((path) => {
      return new HtmlWebpackPlugin( {
        template: path,
        filename: `${path.split(/\/|.pug/).splice(-2, 1)}.html`,
      });
    })],
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          (mode === 'development') ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      //Options
                    }
                  ]
                ]
              }
            }
          },
          "sass-loader",
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader',
        exclude: /(node-modules|bower_components)/,
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },

}

При формировании страницы form-elements.html получаю в консоли следующую ошибку:

ReferenceError: jQuery is not defined

введите сюда описание изображения

В чем может быть проблема?

1 ответ 1

0

Попробуйте сдалать так, как указано в документации webpack по ProvidePlugin.

Замените

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

На

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});
2
  • да, спасибо! Помогло исправить ошибку! 16 июн 2022 в 5:56
  • @AleksandrVolkov отметьте ответ, как правильный)
    – Neverm1ndo
    16 июн 2022 в 12:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.