Bundling an npm version of TinyMCE with CommonJS and Webpack

The following procedure will assist with bundling an npm version of TinyMCE with Webpack using CommonJS syntax. The procedure assumes the user has experience with Webpack and CommonJS syntax. The following steps provide a working example for bundling a basic TinyMCE configuration with Webpack, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor.

If TinyMCE will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: Installing TinyMCE.

Requirements

This guide requires the following:

Node.js and npm
Basic knowledge of how to use Webpack
(Optional: For premium features) The latest premium .zip bundle of TinyMCE for including premium plugins

Procedure

Add tinymce and the following development dependencies to the project.
- webpack
- webpack-cli
- mini-css-extract-plugin
- html-webpack-plugin
- css-loader
  
  For example:
  npm install tinymce && npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader