与webpack将Jquery添加到捆绑包中

Question

我正在尝试将我的脚本与jQuery捆绑在一起，这是它工作所必需的。这是其他站长必须插入到他们的网站中的片段，所以我不希望它干扰他们可能正在运行的任何jQuery。

我已经按照如下说明操作：

const webpack = require('webpack');
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});
const path = require('path');

module.exports = (env, options) => ({
  entry: "./clickscape.js",
  output: {
    path: path.resolve(__dirname, '../priv/static/js'),
    filename: 'clickscape-bundle.js'
  }
});

我还有以下package.json：

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch-stdin --progress --color"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"
  }
}

它构建时没有错误，但是jQuery不适用于我的最终脚本。我做错了什么？

Answer 1

您应该将jquery添加到webpack.config.js中的插件数组，如下所示。

这将使webpack能够全局地将jquery对象注入到依赖图中的所有js文件中

./webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports={
    entry:{
        index : "./src/index.js"
    },
    output :{
        filename : "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            divine:'jquery'
        })
    ]
}

使用下面的指令生成js包，并验证结果。可以使用$、jQuery或divine访问jquery提供的实用函数。您可以选择使用其中的任何一个或全部。

./src/index.js

console.log("jquery object ",jQuery);
console.log("jquery $ ",$);
console.log("jquery divine ",divine)