Bundling an npm version of TinyMCE with ES6 and Webpack

The following procedure will assist with bundling an npm version of TinyMCE with Webpack using ES6+ syntax. The procedure assumes the user has experience with Webpack and ES6+ 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