如何让mini-css-extract-plugin与webpack 5一起工作?

Question

我正在尝试提取我的库中的css文件。我读过这样做的方法是使用mini-css-extract-plugin。

我做错了什么吗?是否有另一种方法来提取我的库的css文件?

下面我使用https://webpack.js.org/plugins/mini-css-extract-plugin 上提供的相同文件创建了一个简单的测试项目下面的例子在webpack 5中失败了，但是在webpack 4中可以正常工作。

style.css

body {
background: green;
}

index.js

import './style.css';

package.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "src/component.js",
"dependencies": {},
"devDependencies": {
"css-loader": "^5.0.1",
"mini-css-extract-plugin": "^1.3.5",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"scripts": {
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC"
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
index: './index.js'
},
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};

误差

$ npm run build
> test@1.0.0 build C:UsersU708478LAS1CARIWells.Carina.Core.BlackboxWebtest
> webpack --config webpack.config.js
assets by status 2.12 KiB [cached] 1 asset
runtime modules 657 bytes 3 modules
cacheable modules 60 bytes
./index.js 21 bytes [built] [code generated]
./style.css 39 bytes [built] [code generated] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (C:UsersU708478LAS1CARIWells.Carina.Core.BlackboxWebtestnode_moduleswebpacklibjavascriptJavascriptModulesPlugin.js:119:10)
at C:UsersU708478LAS1CARIWells.Carina.Core.BlackboxWebtestnode_moduleswebpacklibjavascriptCommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_modulestapablelibHookCodeFactory.js:19:10), <anonymous>:5:1)
at Hook.CALL_DELEGATE [as _call] (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_modulestapablelibHook.js:14:14)
at Compiler.newCompilation (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_moduleswebpacklibCompiler.js:992:30)
at C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_moduleswebpacklibCompiler.js:1035:29
at Hook.eval [as callAsync] (eval at create (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:4:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_modulestapablelibHook.js:18:14)
at Compiler.compile (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_moduleswebpacklibCompiler.js:1030:28)
at Compiler.runAsChild (C:UsersU708478LAS1CARIWells.Carina.Core.BlackBoxWebtestnode_moduleswebpacklibCompiler.js:497:8)
@ ./index.js 1:0-21
webpack 5.18.0 compiled with 1 error and 1 warning in 552 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:

Answer 1

更新mini-css-extract-plugin到webpack 5仍在进行中:https://github.com/Automattic/wp-calypso/projects/100#card-51415407

Answer 2

mini-css-extract-plugin现在与Webpack 5兼容，从v2.0.0开始

Answer 3

Webback团队说:'注意，如果你从你的webpack入口点导入CSS或在初始块中导入样式，mini-css-extract-plugin将不会加载这些CSS到页面中。请使用html-webpack-plugin自动生成链接标签或创建带有链接标签的index.html文件。

作为一个暂时的解决方案，使mini-css-extract-plugin与你的Webpack 5项目一起工作，我可能建议你尝试降低你的"mini-css-extract-plugin"。版本号，比方说，^1.3.9.