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
}
}