无法将 mini-css-extract 插件安装到我的项目中答案

【问题标题】：Not able installing mini-css-extract plugin into my project无法将 mini-css-extract 插件安装到我的项目中
【发布时间】：2021-11-12 20:06:48
【问题描述】：

我正在尝试安装 npm install --save \ mini-css-extract-plugin \ css-loader 但我的 webpack 中出现此错误，有人可以帮我解决这里的问题吗？是 webpack 版本还是 node_modules？

package.json

"devDependencies": {
    "postcss-loader": "^3.0.0",
    "raw-loader": "^4.0.1",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
    }

错误

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @ckeditor/ckeditor5-build-decoupled-document@24.0.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.43.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from mini-css-extract-plugin@2.3.0
npm ERR! node_modules/mini-css-extract-plugin
npm ERR!   mini-css-extract-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

更新： webpack.config.js

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

module.exports = {
    devtool: 'source-map',
    performance: { hints: false },

    entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),

    output: {
        // The name under which the editor will be exported.
        library: 'DecoupledEditor',

        path: path.resolve( __dirname, 'build' ),
        filename: 'ckeditor.js',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },

    optimization: {
        minimizer: [
            new TerserPlugin( {
                sourceMap: true,
                terserOptions: {
                    output: {
                        // Preserve CKEditor 5 license comments.
                        comments: /^!/
                    }
                },
                extractComments: false
            } )
        ]
    },

    plugins: [
        new CKEditorWebpackPlugin( {
            // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
            // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
            language: 'en',
            additionalLanguages: 'all'
        } ),
        new webpack.BannerPlugin( {
            banner: bundler.getLicenseBanner(),
            raw: true
        } )
    ],

    module: {
        rules: [
            {
                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
                        } )
                    }
                ]
            }
        ]
    }
};

【问题讨论】：

标签： javascript node.js npm webpack ckeditor5

【解决方案1】：

MiniCssExtractPlugin 需要 webpack 5 才能工作。

从version 2.0.0 开始，支持的最低 webpack 版本为 5.0.0

作为一个选项，您可以尝试使用 MiniCssExtractPlugin version 1.6.2。也可以考虑升级到 webpack5，但 raw-loader 插件以及 terser-webpack-plugin 已被弃用

【讨论】：