使用webpack加载bootstrap时,'jquery没有定义'

我刚刚开始学习使用Webpack(以前我只是使用手动方式来分别包含单独的脚本)。 我用bootstrap-loader加载bootstrap。 这是我的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'); 

我find了上面这么多人提出的路线。 但是我只是简单地加载页面时出错。 只是一些例子: 一些SO问题 , webpack问题 , 另一个SO问题 。

后来我发现了这个问题 ,还有这个问题 。 所以这个页面实际上和引导js的function一起工作。

我将添加我的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" } } 

我是新来的webpack,但我不是新来的JS。 我想知道为什么window.$不工作。

我想知道为什么有些人在webpack中提出这个插件:

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

有人build议这个(也不适合我):

  resolve: { alias: { jquery: "jquery/src/jquery" } } 

我玩了一段时间的节点,我记得节点使用请求js加载(虽然我不是很清楚普通vs require和amd之间的区别)。 但为什么有些人提到常见的js?

我正在开发后端一段时间,刚刚开始前端 – 这么多问题都出现了。 如果你给我提供了一些链接指导阅读,这可以清除我的疑惑/build立我对这些的基本理解,这就够了。

       

网上收集的解决方案 "使用webpack加载bootstrap时,'jquery没有定义'"

添加这个插件

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

你应该可以在你的整个项目中使用jquery。

如果添加插件后问题仍然存在,请尝试重新启动您的nodejs服务器。 记得使用npm install --save jquerynpm install --save jquery

插件是不需要的。 只需使用以下作为条目:

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

然后在ES6 +文件中使用:

 import $ from "jquery"; 

我知道这有点旧了,但我设法这样做:

global.jQuery = require('jquery'); 要求( '自举');