How to shim tinymce in webpack?

Question

I'm trying to get tinymce recognized by webpack. It sets a property named tinymce on window, so evidently one option is to require() it using syntax like this (described at the bottom of the EXPORTING section of the webpack docs):

require("imports?window=>{}!exports?window.XModule!./file.js

But in this example, how is ./file.js resolved? I installed tinymce via npm, and I can't figure out how to specify the right path to the tinymce.js file.

Regardless, I'd rather handle this in my configuration and be able to just require('tinymce') if possible, so I've installed exports-loader and added the following to my configuration (based on this discussion):

module: {
    loaders: [
        {
            test: /[\/]tinymce\.js$/,
            loader: 'exports?tinymce'
        }
    ]
}

Unfortunately this isn't working. What's wrong with my configuration?

Answer 1

The tinymce module on npm can't be required directly, but contains 4 different distributions of the library. Namely:

• tinymce/tinymce.js
• tinymce/tinymce.min.js
• tinymce/tinymce.jquery.js
• tinymce/tinymce.jquery.min.js

To be able to do require('tinymce') in your code, you can add an alias in your webpack config, as well as a custom loader for your distribution of choice.

resolve: {
  alias: {
    // require('tinymce') will do require('tinymce/tinymce') 
    tinymce: 'tinymce/tinymce',
  },
},
module: {
  loaders: [
    {
      // Only apply on tinymce/tinymce
      include: require.resolve('tinymce/tinymce'),
      // Export window.tinymce
      loader: 'exports?window.tinymce',
    },
  ],
},

Where you can replace tinymce/tinymce with your distribution of choice.