title: Shimming deps and exports from RequireJS in Webpack
body: <p>I am migrating my project from RequireJS to Webpack 4.6 and I have some difficulties with setup. I am quite new to Webpack so it's little bit complicated for me so maybe I just don't understand something.</p>
  
  <p>I am trying to migrate shimming setting froms requireJS config to webpack config.</p>
  
  <p>This is the old setting in <strong>require.config.js</strong> . I removed paths from snippet for readability but its all there.</p>
  
  <pre><code>require.config({
      baseUrl: typeof(templateBaseUrl) !== 'undefined' ? templateBaseUrl : '../js',
      waitSeconds: 45,
      shim: {
          'menu-aim': {
              deps: ['jquery']
          },
          'bootstrap/dropdown': {
              exports: 'jQuery.fn.dropdown'
          },
          'bootstrap-select': {
              deps: [
                  'bootstrap/dropdown'
              ],
              exports: 'jQuery.fn.selectpicker'
          },
          'colorbox': {
              deps: [
                  'jquery.browser'
              ],
              exports: 'jQuery.fn.colorbox'
          },
          'conditioner': {
              deps: [
                  'utils/Observer',
                  'utils/Promise'
              ]
          },
          'cookie': {
              exports: 'monster'
          },
          'jquery.browser': {
              exports: 'jQuery.browser'
          },
          'jquery.easing': {
              exports: 'jQuery.easing'
          },
          'jScrollPane': {
              deps: [
                  'jquery.mousewheel'
              ],
              exports: 'jQuery.fn.jScrollPane'
          },
          'jQuery.serializeObject': {
              exports: 'jQuery.fn.serializeObject'
          },
          'jt.history': {
              exports: 'jQuery.tools.history'
          },
          'jt.tabs': {
              exports: 'jQuery.tools.tabs'
          },
          'jt.validator': {
              exports: 'jQuery.tools.validator'
          },
          'lodash': {
              exports: '_'
          },
          'modernizr': {
              exports: 'Modernizr'
          },
          'miuri': {
              exports: 'miuri'
          },
          'mobiledetect': {
              exports: 'MobileDetect'
          },
          'dateformatter': {
              exports: 'DateFormatter'
          },
          'attrchange': {
              exports: 'jQuery.fn.attrchange'
          },
          'datetimepicker': {
              deps: [
                  'dateformatter'
              ],
              exports: 'jQuery.datetimepicker'
          }
      },
      paths: {
  
      },
      map: {
          '*': {
              'conditioner': '../vendor/conditioner/conditioner',
              'jquery.tools': '../vendor/jquery.tools/src',
              'underscore': 'lodash',
              'pubsub': 'pubsub-js'
          }
      },
      packages: []
  });
  </code></pre>
  
  <p>At first I used webpack.config without shimming configuration, just simple setting with entry point and aliases for modules. After running <em>npx webpack</em>, the build run successfully but I got a warning:</p>
  
  <pre><code>&gt; WARNING in ./node_modules/conditioner-js/dist/min/conditioner.js
  &gt; 4:17525-17532 Critical dependency: require function is used in a way
  &gt; in which dependencies cannot be statically extracted  @
  &gt; ./node_modules/conditioner-js/dist/min/conditioner.js  @
  &gt; ./src/js/lib/conditional-loader.js  @ ./src/js/app.js
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
      mode:   'development',
      entry: './src/js/app.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve('../../Public/js', 'dist'),
          publicPath: "/Resources/Public/js/dist/"
      },
  
      resolve: {
          modules: [
              "node_modules",
              "./src/js"
          ],
          alias: {
              "jquery.tools":                 "@bower_components/jquery.tools/src",
              "underscore":                   "lodash",
              "pubsub":                       "pubsub-js",
              "parsley":                      "parsleyjs",
              "miuri":                        "miuri.js",
              "jScrollPane":                  "jscrollpane",
              "datetimepicker":               "jquery-datetimepicker",
              "cookie":                       "cookie-monster",
              "conditioner":                  "conditioner-js",
              "colorbox":                     "jquery-colorbox",
              "jQuery.serializeObject":       "@bower_components/jQuery.serializeObject",
              "jQuery.touchswipe":            "jquery-touchswipe",
              "jquery.browser":               "@bower_components/jquery.browser",
              "jquery.easing":                "@bower_components/jquery.easing/js/jquery.easing",
              "jt.tabs":                      "@bower_components/jquery.tools/src/tabs/tabs",
              "jt.validator":                 "@bower_components/jquery.tools/src/validator/validator",
              "bootstrap-select":             "bootstrap-select/dist/js/bootstrap-select"
          }
      }
  };
  </code></pre>
  
  <p>I guessed there must be something wrong with missing shimming settings because although build had run page is loading with errors. So I added exports-loader and import-loader which I found in official documentation to webpack.config</p>
  
  <pre><code>plugins: [
          new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery'
          })
      ],
      module: {
        rules: [
            {
                test: require.resolve('jquery-colorbox'),
                use: "exports-loader?colorbox=jQuery.fn.colorbox"
  
            },
            {
                test: require.resolve('conditioner-js'),
                use: "imports-loader?utils/Observer,utils/Promise"
            }
        ]
      },
  </code></pre>
  
  <p>I added shim config for conditioner and colorbox modules for begining.
  However both of them are throwing me some errors when building in modules where they are required.</p>
  
  <pre><code>ERROR in ./src/js/lib/lightbox.js
  Module not found: Error: Can't resolve 'exports-loader' in '/pathToCustomJsFolder/'
   @ ./src/js/lib/lightbox.js 4:19-38
  
  ERROR in ./src/js/lib/conditional-loader.js
  Module not found: Error: Can't resolve 'imports-loader' in '/pathToCustomJsFolder/'
   @ ./src/js/lib/conditional-loader.js 3:20-42
  </code></pre>
  
  <p>In both modules lightbox.js or conditional-loader.js I am using AMD modules syntax and on the lines which throwing errors I am just calling require call.
  e.g</p>
  
  <pre><code>var colorbox = require('colorbox'); //in lightbox.js
  var conditioner = require('conditioner'); //in conditional-loader.js
  </code></pre>
  
  <p>I am trying to figure out what I am doing wrong a days, read many tutorials but I have no idea where is the problem. If anyone could help me I would be very grateful.
  Thanks a lot!</p>