For a variety of reasons, we chose Ueditor as our rich text editor.

Ueditor doesn’t support modularity, so you can’t use import in your code. In the first project we imported the Ueditor js file directly through the script tag, and in the React code we used window.ue directly to use the editor. However, there is a problem, we have made changes to UE source code, adding custom functions. UE files imported directly are cached in the browser, and we have to clear the cache for every change to take effect.

To solve the caching problem, the WebPack configuration must meet the following conditions:

  1. Automatically hash UE file names after every code change
  2. Automatically inserts HTML template files and loads them before the main entry file is loaded

The first step

To allow UE files to enter the packaging process, we use it as a new entry file

const entry = {
    main: ['babel-polyfill'.'./src/main.js'].ueditor_config: ['./src/common/UEditor/ueditor.config.js'].ueditor_all: ['./src/common/UEditor/ueditor.all.js']};new HtmlWebpackPlugin({
    template: `./src/app/${key}/templates/${filename}`.filename: `.. /view/${targetHtml}`.hash: true.chunks: [ueditor_all, ueditor_config, main]
})
Copy the code

After building with the configuration above, we will find that the result is not what we want

<script type="text/javascript" src="/public/main.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.config.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.all.xxxx.js"></script>
Copy the code

Main.js comes before UE, so using window.UE in main will cause an error. Obviously, we need a way to make this sequence fit our expectations.

The second step

HtmlWebpackPlugin’s chunksSortMode attribute is used to control the order of script tags inserted into template HTML. The default value is Auto. It will sort according to the ID generated by Webpack for each chunk. That’s right up front in HTML. So our first solution here is to reverse the entry order

const entry = {
	ueditor_config: ['./src/common/UEditor/ueditor.config.js'].ueditor_all: ['./src/common/UEditor/ueditor.all.js']
    main: ['babel-polyfill'.'./src/main.js']};Copy the code

However, this method has drawbacks. When there are multiple template HTML entries that need to be referenced in the project, controlling the sorting within the entry will encounter conflicts and not be flexible enough. So we put the order control down into each HtmlWebpackPlugin by setting chunksSortMode to manual and sorting chunks by chunks, for example

new HtmlWebpackPlugin({
	...
    chunks: [ueditor_config, ueditor_all, main]
})
Copy the code

In this way, the generated HTML srCIpt will be in the following order

<script type="text/javascript" src="/public/ueditor.config.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.all.xxxx.js"></script>
<script type="text/javascript" src="/public/main.xxxx.js"></script> 
Copy the code

Now the order looks ok, but when we run it, we see that the console says regeneratorRuntime is not defined

The third step

The error at the end of step 2 was caused by the new ES6 API we used not being converted. Before, we just added babel-polyfill at the entrance of main, and main was loaded after UE, so we reported an error. So you need to put babel-Polyfill in the first file in the entry

const entry = {
	ueditor_config: ['babel-polyfill'.'./src/common/UEditor/ueditor.config.js'].ueditor_all: ['./src/common/UEditor/ueditor.all.js']
    main: ['./src/main.js']};Copy the code

After continuing, the error in step 2 has been resolved. However, a new mistake was made

TypeError: 'caller'.'callee', and 'arguments' 
properties may not be accessed on strict mode functions or the arguments objects for calls to them
Copy the code

The fourth step

Bable adds use strict to compiled JS by default; Caller, Callee, and arguments cannot be used in strict mode. We find that arguments. Callee is used extensively in UE source code. It is not practical to change the source code directly, so bable can only be configured to ignore the file. In.babel we add the following configuration,

"presets": [
    "react"]."ignore": [
     "./src/common/UEditor/ueditor.all.js"].Copy the code

This webpack is ready to build the UE module as we expect.