Tell me how to connect jquery using webpack. I did the following:

1) Download jQuery and put it in the Lib directory:

enter image description here

2) Set up a webpack:

"use strict" { let path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const bundleFolder = "wwwroot/bundle/"; module.exports = { entry: "./Scripts/main.ts", output: { filename: 'script.js', path: path.resolve(__dirname, bundleFolder) }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, plugins: [ new CleanWebpackPlugin([bundleFolder]), new webpack.ProvidePlugin({ $: "./Lib/jquery-3.3.1.min.js", jquery: "./Lib/jquery-3.3.1.min.js", "windows.jQuery": "./Lib/jquery-3.3.1.min.js", }) ], devtool: "inline-source-map" }; }

Here is my index file:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index</title> </head> <body> <h1 id="helloworld"></h1> <div class="test">123</div> <script src="~/bundle/script.js"></script> </body> </html>

The main script:

 import $ from 'jquery'; $(".test").css("background", "yellow");

(I do not know why I am writing import, it should be like without it, but the IDE underlines in red if I remove)

    1 answer 1

    As far as I understand how it works, if you want to connect jQuery to the project, then it needs to be added to the dependency graph

    npm i jquery -D

    And in webpack.config.js add something like this

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

    And then Webpack will automatically connect jquery when meeting $ or jQuery