Search code examples
javascriptnode.jsnpmwebpackjspm

JSPM override equivalent in Webpack

I have a project that contains the following block inside a jspm block in the package.json file.

"overrides": {
  "github:repoName/myPackage@master": {
    "main": "js/someFolder",
    "shim": {
      "js/someFolder": [
        "jquery"
      ]
    }
  }

In a separate project I want to use this same package but I will not be using JSPM. I need a way to enforce this jquery override but have been unable to successfully implement this. I am using Webpack in my project. Would this webpack.config.js be where I code in such an override? If possible I would like to avoid using shrinkwrap.js.

So far I have tried adding the following in my webpack.config.js (which admittedly is overkill):

plugins:[
 new webpack.ProvidePlugin({
   $: "jquery",
   "$": "jquery",
   "jQuery": "jquery",
   "jquery": "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery",
   "window.$": "jquery"
 })
 .
 .
 .
Solution

  • I have answered my own question here: https://stackoverflow.com/a/51308003/1580915

    TLDR: require instead of import resolved the issue, Webpack did not need a jQuery configuration