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

Question

我正在使用带有最新 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 有什么问题。

请指教！

Answer 1

postcss-loaderv4 有许多重大更改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({})
}