【增加】添加webpack对ckeditor5的支持

config-overrides.js

-const {override, fixBabelImports, getBabelLoader, addDecoratorsLegacy,disableEsLint} = require('customize-cra');
+const {override, fixBabelImports, getBabelLoader, addDecoratorsLegacy, disableEsLint} = require('customize-cra');
+const {styles} = require('@ckeditor/ckeditor5-dev-utils');
 
 const fileLoaderMatcher = function (rule) {
     return rule.loader && rule.loader.indexOf(`file-loader`) !== -1;
 };
 
 function addPlugin(config) {
-    config.module.rules[2].oneOf.unshift(
+    config.module.rules[2].oneOf = [
+        ...[
+            /*-------------------------------------------ant design webpack config start-----------------------------------------------*/
             {
                 test: /\.less$/,
                 use: [
@@ -46,17 +49,53 @@ function addPlugin(config) {
                         },
                     },
                 ]
+            },
+            /*-------------------------------------------ant design webpack config end-----------------------------------------------*/
+
+            /*-------------------------------------------ckeditor5 webpack config start-----------------------------------------------*/
+            {
+                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+                use: ['raw-loader']
+            },
+            {
+                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
+                use: [
+                    {
+                        loader: 'style-loader',
+                        options: {
+                            singleton: true
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: styles.getPostCssConfig({
+                            themeImporter: {
+                                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
+                            },
+                            minify: true
+                        })
                     }
-    );
+                ]
+            },
+            {
+                test: /\.css$/,
+                exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
+                // (...)
+            }
+            /*-------------------------------------------ckeditor5 webpack config end-----------------------------------------------*/
+        ],
+        ...config.module.rules[2].oneOf
+    ];
+
 
     // file-loader exclude
     let l = getBabelLoader(config, fileLoaderMatcher);
     let reg = /\.less$/;
-    if(Array.isArray(l.exclude)) {
+    if (Array.isArray(l.exclude)) {
         l.exclude.push(reg);
-    }else if(!!l.exclude){
-        l.exclude = [l.exclude,reg]
-    }else {
+    } else if (!!l.exclude) {
+        l.exclude = [l.exclude, reg]
+    } else {
         l.exclude = reg;
     }
 

package.json

@@ -5,6 +5,15 @@
   "dependencies": {
     "@babel/core": "7.2.2",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@ckeditor/ckeditor5-alignment": "^11.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.0",
+    "@ckeditor/ckeditor5-build-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-heading": "^11.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
+    "@ckeditor/ckeditor5-react": "^1.1.3",
+    "@ckeditor/ckeditor5-theme-lark": "^13.0.1",
     "@svgr/webpack": "4.1.0",
     "antd": "^3.18.1",
     "babel-core": "7.0.0-bridge.0",
@@ -70,6 +79,7 @@
     "postcss-write-svg": "^3.0.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.3.0",
+    "raw-loader": "^2.0.0",
     "react": "^16.8.3",
     "react-app-polyfill": "^0.2.1",
     "react-app-rewired": "^2.1.0",