如何用Webpack构建带Source Maps的未压缩CKEditor5自定义版本

要实现带 Source Maps 的未压缩 CKEditor5 构建，只需调整 Webpack 配置中的模式、Source Map 选项，并配合 CKEditor5 专属的构建插件即可。以下是完整的配置示例：

1. 基础 Webpack 配置文件 (webpack.config.js) #

const path = require('path');
const { CKEditorWebpackPlugin } = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');

module.exports = {
  // 入口文件：指向你的自定义编辑器入口
  entry: './src/ckeditor.js',

  // 输出配置：未压缩的 bundle 及 Source Map
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ckeditor.js',
    library: 'ClassicEditor',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },

  // 模式设为 development，禁用代码压缩
  mode: 'development',

  // 配置 Source Map 类型：推荐使用 'source-map' 生成独立的映射文件
  // 若追求构建速度，可改用 'eval-cheap-module-source-map'
  devtool: 'source-map',

  module: {
    rules: [
      // 处理 CKEditor5 的 SVG 图标
      {
        test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
        use: ['raw-loader']
      },
      // 处理 CKEditor5 的样式文件
      {
        test: /ckeditor5-[^/]+\/theme\/[^/]+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag',
              attributes: {
                'data-cke': true
              }
            }
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: false // 禁用样式压缩
              })
            }
          }
        ]
      },
      // 处理自定义样式（如果有的话）
      {
        test: /\.css$/,
        exclude: /ckeditor5-[^/]+\/theme\/[^/]+\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },

  plugins: [
    // CKEditor5 专属插件：处理翻译、图标等资源
    new CKEditorWebpackPlugin({
      language: 'zh-cn', // 根据需要设置语言
      additionalLanguages: 'all' // 可选：打包所有语言包，或指定特定语言
    })
  ],

  // 避免 CKEditor5 内部模块被意外优化
  optimization: {
    minimize: false // 确保代码不被压缩
  }
};

2. 依赖安装 #

确保已安装所需的开发依赖：

npm install --save-dev webpack webpack-cli style-loader css-loader postcss-loader raw-loader @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils

3. 构建命令 #

在 package.json 中添加构建脚本：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

执行构建：

npm run build

4. 验证结果 #

构建完成后，dist 目录下会生成：

• ckeditor.js：未压缩的编辑器 bundle
• ckeditor.js.map：对应的 Source Map 文件

在浏览器中使用编辑器时，开发者工具的调试面板会自动加载 Source Map，让你可以直接查看原始源码的回溯信息，无需解读混淆后的代码。

内容的提问来源于stack exchange，提问作者tony