将 postcss-loader 从 3.0.0 更新到 4.1.0 后 webpack.code 构建被破坏答案

【问题标题】：webpack.code build is broken after update postcss-loader from 3.0.0 to 4.1.0将 postcss-loader 从 3.0.0 更新到 4.1.0 后 webpack.code 构建被破坏
【发布时间】：2020-12-14 22:28:55
【问题描述】：

我正在使用带有最新 CkEditor 5 和 postcss-loader 的最新 webpack 4（不是 5）。当我使用 postcss-loader 3.0.0 时，一切都很好。将其更新到 4.1.0 后，我收到此错误消息：

“ValidationError：无效的选项对象。PostCSS 加载器已使用与 API 架构不匹配的选项对象进行初始化。选项具有未知属性“插件”。”

我的 webpack.config 是：

        {
            stats: {
                modules: false
            },
            context: __dirname,
            entry: {
                shopApp: [
                    './node_modules/zooming/build/zooming.min.js',
                    jsRoot + 'shop/index.js'
                ]
            },
            output: {
                path: path.join(__dirname, wwwroot + 'dist/js'),
                filename: '[name].min.js',
                chunkFilename: '[name].[chunkhash].min.js',
                publicPath: '/dist/js/'
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        loader: 'babel-loader?cacheDirectory=true',
                        exclude: file => /node_modules/.test(file),
                        query: {
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: "> 2% and last 2 versions"
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        test: /\.svg$/,
                        use: [ 'raw-loader' ]
                    },
                    {
                        test: /\.css$/,
                        use: [
                            {
                                loader: 'style-loader',
                                options: {
                                    injectType: 'singletonStyleTag',
                                    attributes: {
                                        'data-cke': true
                                    }
                                }
                            },
                            {
                                loader: 'postcss-loader',
                                options: styles.getPostCssConfig( {
                                    themeImporter: {
                                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                    },
                                    minify: true
                                } )
                            }
                        ]
                    }
                ]
            },
            devtool: isDevBuild ? 'eval-source-map' : false,
            plugins: [
                new Webpack.DefinePlugin({
                    'process.env': {
                        NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                    }
                }),
                new CKEditorWebpackPlugin( {
                    // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor-webpack.js).
                    language: 'en',
                    addMainLanguageTranslationsToAllAssets: true
                })
            ]
        }

所以是的，我有插件，但这是必须的。我什至不知道插件和 postcss-loader 4.1.0 有什么问题。

请指教！

【问题讨论】：

标签： webpack ckeditor5 postcss-loader

【解决方案1】：

postcss-loader v4 有许多重大变化https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0。

例如，

PostCSS (plugins/syntax/parser/stringifier) 选项被移至 postcssOptions 选项

我相信将styles.getPostCssConfig 传递给postcssOptions 应该有望解决您的问题：

loader: 'postcss-loader',
options: {
  postcssOptions: styles.getPostCssConfig({})
}

【讨论】：

谢谢，修改后错误消失了，我有新的了。我绝对认为 CkEditor5 团队应该更新其 webpack 高级设置文档，以及其所有代码以支持 postcss-loader 4.0.0+ 甚至支持 webpack 5。