jQuery与Webpack 2

我的webpack.config.js如下所示：

var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); var node_dir = __dirname + '/node_modules'; const autoprefixer = require('autoprefixer'); const ProvidePlugin = require('webpack/lib/ProvidePlugin'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: ['tether', 'font-awesome-loader',"bootstrap-loader","./js/client.js"], resolve: { extensions: ['.js', '.styl'], alias: { 'jquery': node_dir + '/jquery/src/jquery.js', } }, module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], } }, { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000', }, { test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, use: 'file-loader', }, { test: /\.styl$/, use: [ 'style-loader', 'css-loader', { loader: 'stylus-loader', /*options: { use: [stylus_plugin()], },*/ }, ], }, // Use one of these to serve jQuery for Bootstrap scripts: // Bootstrap 4 { test: /bootstrap\/dist\//, use: 'imports-loader?jQuery=jquery' }, ] }, output: { path: __dirname + "/dist/", filename: "client.min.js" }, plugins: [ //new webpack.optimize.DedupePlugin(), //new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", Tether: "tether", "window.Tether": "tether", Alert: "exports-loader?Alert!bootstrap/js/dist/alert", Button: "exports-loader?Button!bootstrap/js/dist/button", Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", Modal: "exports-loader?Modal!bootstrap/js/dist/modal", Popover: "exports-loader?Popover!bootstrap/js/dist/popover", Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", Tab: "exports-loader?Tab!bootstrap/js/dist/tab", Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", Util: "exports-loader?Util!bootstrap/js/dist/util", }), new webpack.LoaderOptionsPlugin({ postcss: [autoprefixer], }) ], }; 

但是当我尝试使用jQuery.timeago（）函数时，我得到了以下错误。

我正在按照React By Example的书。 当我输入window.jQuery时，我会在jQuery之后出现一些奇怪的数字。 但是当我输入jQuery时，我得到了不确定的东西。 由于bootstrap 4和$ .ajax（）正在工作，我确信包含jQuery但不确定为什么jQuery会显示unifined。

任何人都可以解释如何包含jQuery以及我做错了什么。

Answer 1

将插件添加到webpack配置的插件部分，如下所示：

 var webpack = require('webpack') ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', }) ] 

编辑：

你有循环依赖：

 timeago: jquery client: timeago jquery 

但是jquery和client是同一个bundle。 尝试在html中切换include js包，如下所示：

代替：

如果这没有帮助或者您有其他错误，则需要将jquery提取到分离的bundle并在timeago之前包含它。 另一种方法是包括像旧学校这样的jquery例如来自cdn并使webpack知道如下：

 externals: { jquery: 'jQuery' } 

要将jquery提取到分离的bundle并使其在timeago中可见，请使用如下序列：

并使用webpack常见的块插件，如下所示：

 entry: { common: ["jquery"], ... }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "common", filename: "common.js", minChunks: Infinity, }) ],