【增加】添加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(
-        {
-            test: /\.less$/,
-            use: [
-                require.resolve('style-loader'),
-                require.resolve('css-loader'),
-                {
-                    loader: require.resolve('postcss-loader'),
-                    options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                            require('postcss-flexbugs-fixes'),
-                            require('postcss-preset-env')({
-                                autoprefixer: {
-                                    flexbox: 'no-2009',
-                                },
-                                stage: 3,
-                            }),
-                        ],
+    config.module.rules[2].oneOf = [
+        ...[
+            /*-------------------------------------------ant design webpack config start-----------------------------------------------*/
+            {
+                test: /\.less$/,
+                use: [
+                    require.resolve('style-loader'),
+                    require.resolve('css-loader'),
+                    {
+                        loader: require.resolve('postcss-loader'),
+                        options: {
+                            // Necessary for external CSS imports to work
+                            // https://github.com/facebookincubator/create-react-app/issues/2677
+                            ident: 'postcss',
+                            plugins: () => [
+                                require('postcss-flexbugs-fixes'),
+                                require('postcss-preset-env')({
+                                    autoprefixer: {
+                                        flexbox: 'no-2009',
+                                    },
+                                    stage: 3,
+                                }),
+                            ],
+                        },
                     },
-                },
 
-                // 此处可对ant design进行主题配置
-                {
-                    loader: require.resolve('less-loader'),
-                    options: {
-                        javascriptEnabled: true,
-                        // theme vars, also can use theme.js instead of this.
-                        modifyVars: {
-                            "@primary-color": "#719CF0",
-                            "@menu-highlight-color": "#719CF0",
-                            "@menu-item-active-bg": "rgba(13,156,240,.3)",
-                            "@layout-header-background": "#1E4B9E",
-                            "@layout-sider-background": "#fff",
-                            "@btn-padding-sm": "0 4px - 1px"
+                    // 此处可对ant design进行主题配置
+                    {
+                        loader: require.resolve('less-loader'),
+                        options: {
+                            javascriptEnabled: true,
+                            // theme vars, also can use theme.js instead of this.
+                            modifyVars: {
+                                "@primary-color": "#719CF0",
+                                "@menu-highlight-color": "#719CF0",
+                                "@menu-item-active-bg": "rgba(13,156,240,.3)",
+                                "@layout-header-background": "#1E4B9E",
+                                "@layout-sider-background": "#fff",
+                                "@btn-padding-sm": "0 4px - 1px"
+                            },
                         },
                     },
-                },
-            ]
-        }
-    );
+                ]
+            },
+            /*-------------------------------------------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",