不能安装mini-css-extract插件到我的项目

Question

我正在尝试安装npm install -save mini-css-extract-plugin css-loader，但我在我的webpack中得到这个错误，有人能帮助我解决这里的问题吗?是webpack ver还是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
} )
}
]
}
]
}
};

Answer 1

MiniCssExtractPlugin需要webpack 5才能工作

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

作为一个选项，你可以尝试使用MiniCssExtractPlugin版本1.6.2。也可以考虑升级到webpack5，但是raw-loader插件和terser-webpack-plugin都已被弃用