Webpack无法加载CKEditor 5

Question

我尝试集成CKEditor 4，它可以与当前的Webpack配置一起使用。

但是，当我尝试按照此处的https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#quick-start指南集成CKEditor 5时，它不会在控制台中没有任何错误地显示。

这是我的webpack.config.js配置：

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const GasPlugin = require('gas-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

const destination = 'dist'

const editContentHtmlPlugin = new HtmlWebpackPlugin({
  template: './src/client/templates/editContent-template.html',
  filename: 'editContent.html',
  inlineSource: '.(js|css)$', // embed all javascript and css inline
})

const sharedConfigSettings = {
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          ie8: true,
          mangle: false,
          compress: {
            properties: false,
            warnings: false,
            comparisons: false,
          },
          output: {
            beautify: true,
            comments: false,
            ascii_only: true,
          },
        },
      }),
    ],
  },
  module: {},
}

const eslintConfig = {
  enforce: 'pre',
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
  options: {
    cache: false,
    failOnError: false,
    fix: true,
  },
}

const appsscriptConfig = {
  name: 'COPY APPSSCRIPT.JSON',
  entry: './appsscript.json',
  plugins: [
    new CleanWebpackPlugin([destination]),
    new CopyWebpackPlugin([
      {
        from: './appsscript.json',
      },
    ]),
  ],
}

const editContentConfig = Object.assign({}, sharedConfigSettings, {
  name: 'CLIENT',
  entry: './src/client/containers/editContentPage.jsx',
  output: {
    path: path.resolve(__dirname, destination),
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      // eslintConfig,
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    editContentHtmlPlugin,
    new HtmlWebpackInlineSourcePlugin(),
  ],
})

module.exports = [
  appsscriptConfig,
  editContentConfig,
]

这是我的package.json：

{
  "name": "test",
  "version": "0.0.1",
  "scripts": {
    "test": "test",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "deploy": "npm run build && npx clasp push",
    "flow": "flow"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@google/clasp": "^1.7.0",
    "@types/google-apps-script": "0.0.26",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-import": "^1.12.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.16.0",
    "eslint-config-google": "^0.9.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-googleappsscript": "^1.0.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "eslint-plugin-standard": "^3.1.0",
    "flow-bin": "^0.101.1",
    "gas-lib": "^2.0.3",
    "gas-webpack-plugin": "^0.3.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "prettier": "^1.18.2",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-addons-css-transition-group": "^15.6.2",
    "react-burger-menu": "^2.6.10",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "style-loader": "^0.22.1",
    "tern": "^0.22.3",
    "tern-googleappsscript": "^1.0.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^12.2.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "antd": "^3.19.6",
    "react-transition-group": "^4.1.1",
    "styled-components": "^4.3.2"
  }
}

我应该在我的配置中进行哪些更改，以使其与CKEditor 5兼容？