项目安装mini-css-extract-plugin出现依赖冲突报错该如何解决？

你遇到的是npm依赖版本不兼容问题，和node_modules无关：

• 当前项目使用的是webpack 4.43.0版本
• 直接执行安装命令时npm会拉取mini-css-extract-plugin的最新正式版，2.x版本的mini-css-extract-plugin强制要求依赖webpack 5以上版本，和现有webpack版本冲突，所以触发ERESOLVE报错。

方案1（推荐）：安装适配webpack 4的依赖版本 #

mini-css-extract-plugin的1.x分支支持webpack 4，执行以下指定版本的安装命令即可：

npm install --save mini-css-extract-plugin@1.6.2 css-loader@5.2.7

注：css-loader 6.x以上版本也仅支持webpack 5，所以这里也指定适配webpack 4的5.x版本。

安装完成后如果需要启用mini-css-extract-plugin，要修改webpack.config.js里css对应的loader配置，将原来的style-loader替换为MiniCssExtractPlugin.loader，同时在plugins数组里新增MiniCssExtractPlugin的实例配置：

1. 先在webpack.config.js头部引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2. 替换css规则里的style-loader：

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        attributes: {
          'data-cke': true
        }
      }
    },
    // 后面的postcss-loader配置保持不变
    {
      loader: 'postcss-loader',
      options: styles.getPostCssConfig( {
        themeImporter: {
          themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
        },
        minify: true
      } )
    }
  ]
}

3. 在plugins数组里添加插件实例：

plugins: [
  new MiniCssExtractPlugin({
    filename: 'styles.css'
  }),
  // 其他原有插件保持不变
  new CKEditorWebpackPlugin(/* 原有配置 */),
  // ...
]

方案2：升级webpack到5.x版本 #

如果需要使用新版mini-css-extract-plugin的特性，可以选择升级webpack到5.x版本，升级时需要同步更新所有webpack相关依赖到适配webpack5的版本，包括但不限于webpack-cli、terser-webpack-plugin、postcss-loader，同时还要检查CKEditor相关的构建依赖是否兼容webpack 5，整体改造成本更高。

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