鍍金池/ 問答/PHP  HTML/ 使用npm run build打包后頁面報錯:jQuery is not def

使用npm run build打包后頁面報錯:jQuery is not defind

我在react中由于要使用jQuery的插件,因此使用npm install jquery --save的方式,在模塊中引入了jquery,在開發(fā)環(huán)境中使用是沒有問題的。但是現(xiàn)在npm run build后,打開打包后的index.html文件,頁面會報:jQuery is not defind的錯誤。請教各位,這可能是什么原因呢?1.
1.webpack中也已經(jīng)定義好了jquery的全局變量。
2.webpack版本為1.x

webpack代碼:

//開發(fā)環(huán)境配置
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') //調(diào)用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/#/login'
        }),

        // 可在業(yè)務(wù) js 代碼中使用 __DEV__ 判斷是否是dev模式(dev模式下可以提示錯誤、測試報告等, 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", //本地服務(wù)器所加載的頁面所在的目錄
        colors: true, //終端中輸出結(jié)果為彩色
        historyApiFallback: true, //不跳轉(zhuǎn)
        inline: true, //實時刷新
        hot: true  // 使用熱加載插件 HotModuleReplacementPlugin
    }
}
回答
編輯回答
萌小萌

你jquery沒有在index.html中引用吧

2018年7月24日 03:34
編輯回答
莫小染

你都說是開發(fā)環(huán)境設(shè)置了,當然只在開發(fā)環(huán)境上能跑啊。。你把他配到base里吧。

2017年7月7日 19:40
編輯回答
涼心人

感謝兩位的回答,我檢查了一下代碼,發(fā)現(xiàn)這個插件在運行時會在函數(shù)中傳入jQuery這個變量,但是奇怪的是jquery并沒有在這個插件之前被打包。因此我在插件源碼的開頭import了jquery,這個報錯也就沒有了。感謝兩位的提供的思路!

2018年2月22日 01:39