我正在尝试提取库中的 css 文件。我已经读过执行此操作的方法是使用 mini-css-extract-plugin。
难道我做错了什么？还有其他方法可以提取我的库的 css 文件吗？
下面我使用提供的相同文件创建了一个简单的测试项目https://webpack.js.org/plugins/mini-css-extract-plugin https://webpack.js.org/plugins/mini-css-extract-plugin
下面的示例在 webpack 5 中失败，但在 webpack 4 中运行良好。
样式.css
body {
background: green;
}
index.js
import './style.css';
包.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'],
},
],
},
};
ERROR
$ npm run build
> [email protected] /cdn-cgi/l/email-protection build C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test
> 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:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:992:30)
at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1035:29
at Hook.eval [as callAsync] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1030:28)
at Compiler.runAsChild (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.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! [email protected] /cdn-cgi/l/email-protection build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection 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:
