webpack jquery 全局安装官方解决办法

https://www.npmjs.com/package/expose-loader

For example, let's say you want to expose jQuery as a global called $:

require("expose-loader?$!jquery");

Thus, window.$ is then available in the browser console.

Alternately, you can set this in your config file:

webpack v1 usage

module: {

  loaders: [

    { test: require.resolve("jquery"), loader: "expose-loader?$" }

  ]

}

webpack v2 usage

module: {

  rules: [{

          test: require.resolve('jquery'),

          use: [{

              loader: 'expose-loader',

              options: '$'

          }]

      }]

}

Let's say you also want to expose it as window.jQuery in addition to window.$. For multiple expose you can use ! in loader string:

webpack v1 usage

module: {

  loaders: [

    { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },

  ]

}

webpack v2 usage

module: {

  rules: [{

          test: require.resolve('jquery'),

          use: [{

              loader: 'expose-loader',

              options: 'jQuery'

          },{

              loader: 'expose-loader',

              options: '$'

          }]

      }]

}

The require.resolve is a Node.js call (unrelated to require.resolve in webpack processing). require.resolve gives you the absolute path to the module ("/.../app/node_modules/react/react.js"). So the expose only applies to the react module. And it's only exposed when used in the bundle.