Expose modules to dependencies with Webpack

In notebook:
Egghead Webpack
Created at:
2016-06-20
Updated:
2016-06-20
Tags:
JavaScript Webpack libraries jQuery

When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assumes that this is bound to window, you can use the imports-loader to provide those dependencies explicitly.

In app.js they're loading LoDash as such:
​import './non_node_modules/sweet-lodash-mixins'​

The problem is when sweet-lodash-mixins does not actually require LoDash but assumes it's on the global object. If it's not our own file but a dependency (we cannot just edit it), how can we expose LoDash to it? 
Done with ImportsLoader.

​​$ np i -D imports-loader

So now we can import sweet-lodash-mixin as such:
import 'imports?_=lodash!./non_node_modules/sweet-lodash-mixins' // eslint-disable-line​​
we assign ​_​ to ​loads​ (highlighted part)

This will in compilation add this line to sweet-lodash-mixin.js:
​var _ = __webpack_require__(/* ! loads */ 50);​

Adds the special imports statement to webpack.config

  // **** webpack.config.js   ****

        module: {
            loaders: [
                {test: /\.js$/, loader: 'babel!eslint', exlcude: /node_modules/},
                {test: /\.css$/, loader: 'style!css'}
                // 1. ++++ add a new loader
                {
                    test: require.resolve('./src/js/non_node_modules/sweet-lodash-mixins.js'),
                    loader: 'imports?_=lodash'
                }
            ]
        }
With this syntax you can expose a variable to a module that you don't have any control over (jQuery, Lodash, etc).
You could assign  ​window​.