Javascript '；jquery未定义'；使用webpack加载引导时

我刚刚开始学习使用Webpack（以前我只是使用手动方式单独包含单个脚本）。我使用

引导加载程序

加载引导。这是我的webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
            // images
            { test: /\.png$/, loader: 'url-loader?limit=100000'},
            { test: /\.jpg$/, loader: 'file-loader'},
            // bootstrap image files
            { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ],
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'],
        jquery: './vendor/jquery/jquery.js',
    },
}

这是我的entry.js

global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');

这似乎奏效了。但是，我以前使用过这个，但它不起作用：

window.jQuery = window.$ = require('jquery');

我发现上面这句话是这么多人建议的。但我只是在加载页面时出错。只是一些例子：

后来我发现了。因此，该页面实际上与引导js功能一起工作

我将添加我的package.json，以防相关：

{
  "author": "franklingu",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  }
}

我是新的网页包，但我不是新的JS。我想知道为什么

窗口。$

不工作

我想知道，对于webpack，为什么有些人在插件中建议这样做：

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

有些人建议这样做（对我也不起作用）：

当时我玩了一段时间node，我记得node使用requestjs进行加载（不过我不太清楚common与require与amd之间的区别）。但是为什么有些人提到公共js

我开发后端已经有一段时间了，而我刚刚开始开发前端——出现了很多问题。如果你能给我提供一些阅读指南的链接就足够了，这些指南可以消除我的疑虑/建立我对这些的基本理解。

将此作为插件添加

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

您应该能够在整个项目中使用jquery

---

如果添加插件后问题仍然存在，请尝试重新启动

nodejs

服务器。记住使用

npm安装安装
jquery
——保存jquery

不需要插件。只需使用以下条目：

entry: [
    'jquery', //will load jquery from node_modules
    './assets/js/index',
]

然后在ES6+文件中使用：

import $ from "jquery";

---

我知道这有点旧，但我还是这样做了：

global.jQuery=require（'jQuery'）；

---

需要（“引导”）

我想将我的发现分享给任何未来的开发人员，他们可能拥有与我相同的用例

我的要求是只为AngularJS（1.7.2）应用程序创建供应商捆绑包，而不是应用程序捆绑包，使用Webpack 4（4.16.4）。我认为，因为我只是创建了一个供应商包，所以其他解决方案都不起作用。只有

expose loader

对我有效，就像这样：

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    }

---

更多信息：

我确实在问题中提到了这一点。也许你可以再读一遍。这个解决方案对我不起作用如果你使用这个插件，它应该可以工作，你不需要设置别名。。注意：一旦你用webpack插件插入了jquery，你就不需要用require导入它，你可以转到dev tools并键入$来查看jquery是否已加载。我在你的代码中没有看到任何奇怪的东西，它应该可以工作：-）这对我来说不适用于Webpack4.8.3。最近流程是否发生了变化？我有插件设置到位。我还通过npm安装了jQuery3.3.1。我可以运行npm start，但浏览器不加载jquery。除了使用上面的代码和

npm安装jquery

，还需要其他步骤吗？这在Webpack 2中有效吗？这是否确保在执行

jquery

之前不会执行

index

？@Flimm Webpack 2的“条目”部分没有更改，因此也应该在那里工作。@Flimm Good one，将“jquery”作为第一条记录：）。我更新了我的答案。当将单条目文件与jQuery导入一起使用时，我得到jQuery未在chrome开发工具中为此文件定义（在jQuery之后导入）：@user1063287导入是本地范围。当导入语句不在您提到的文件中时，它将不可用。Hack可能需要导入条目文件并设置global:window.jQuery=$。我没有足够的背景信息来提供更好的建议。只需添加将“expose loader”依赖项添加到项目中所需的信息

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    }