The page reports an error: jQuery is not defind after being packaged with npm run build

because I want to use jQuery plug-ins in react, I have no problem introducing jquery, into the module in the way npm install jquery-save is used in the development environment. But now after npm run build, open the packaged index.html file, the page will report the error of: jQuery is not defind. I would like to ask you, what may be the reason for this? 1.
1.webpack has also defined the global variable of jquery.
2.webpack version is 1.x

webpack Code:

//
var path = require("path")
var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OpenBrowserPlugin = require("open-browser-webpack-plugin");

// var nodeModulesPath = path.resolve(__dirname, "node_modules")
// console.log(process.env.NODE_ENV)

module.exports = {
    entry: path.resolve(__dirname, "app/index.jsx"),
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },

    resolve:{
        extensions:["", ".js",".jsx"],
        alias: {
            handsontable: path.resolve(__dirname, "node_modules/handsontable-pro")
        }
    },

    module: {
        // preLoaders: [
        //     //  
        //     {test: /\.(js|jsx)$/, loader: "eslint-loader", exclude: /node_modules/}
        // ],
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader",
            query: {
              presets: ["react", "es2015"],
                // ant-design 
              plugins: ["react-html-attrs",["import", { "libraryName": "antd" }]]
            }},
            { test: /\.less$/, exclude: /node_modules/, loader: "style!css!postcss!less" },
            { test: /\.css$/, loader: "style!css!postcss" },
            { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:"url-loader?limit=5000&name=img/[name].[ext]" },
            { test:/\.(woff|woff2|svg|ttf|eot)($|\?)/i, loader:"url-loader?limit=5000&name=fonts/[name].[ext]"}
        ]
    },

    eslint: {
        configFile: ".eslintrc" // Rules for eslint
    },

    postcss: [
        require("autoprefixer") //autoprefixer display: flex
    ],

    plugins: [
        // html 
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html",
            favicon: "./ico/favicon.ico"
        }),

        // 
        new webpack.HotModuleReplacementPlugin(),

        // 
        new OpenBrowserPlugin({
          url: "http://localhost:8090/-sharp/login"
        }),

        //  js  __DEV__ devdev, production
        new webpack.DefinePlugin({
          __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == "dev") || "false"))
        }),

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

    devServer: {
        proxy: {
          //  `/WHP.HydroPower`  `/WHP.SSO`  http  localhost:8080 
          "/WHP.HydroPower": {
            target: "http://localhost:8080",
            secure: false
          },
          "/WHP.SSO": {
            target: "http://localhost:8080",
            secure: false
          }
        },
        contentBase: "./public", //
        colors: true, //
        historyApiFallback: true, //
        inline: true, //
        hot: true  //  HotModuleReplacementPlugin
    }
}
Mar.07,2021

your jquery is not quoted in index.html, is it


you all say that it is set up in the development environment, of course, you can only run in the development environment. Put him in base .


Thank you for your answers. I checked the code and found that the plug-in passed the variable jQuery into the function at run time, but it was strange that jquery was not packaged before the plug-in. So I import the jquery, at the beginning of the plug-in source code and there is no error. Thank you both for your ideas!

Menu