入口点构建时出现 MiniCssExtractPlugin 错误

Question

我们在部署之前使用 webpack 来捆绑我们的资源。然而，现在我们还想通过 webpack 捆绑我们的 sass 文件，这样可以简化我们的构建过程。现在，我们确实遇到了一个问题，即 MiniCssExtractPlugin 声称未定义webpack_require 。

我们不知道为什么会发生这种情况，但它们的根本问题似乎与 css-loader 的代码有关。

我们尝试了很多方法来解决这个问题（例如尝试不同的版本、重新安装软件包、检查剩余的全局软件包等。但这些似乎都对结果没有任何影响。

感谢您提前提供的任何帮助。

错误：

ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
    at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
    at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
    at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (****project/_dev/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1423:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1414:32)
    at _promise1.then._result1 (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./js/global.js ./css/theme.scss global[1]

webpack.config.js

ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
    at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
    at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
    at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (****project/_dev/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1423:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1414:32)
    at _promise1.then._result1 (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./js/global.js ./css/theme.scss global[1]

包.json

{
  "dependencies": {
    "@babel/core": "7.6.4",
    "@babel/polyfill": "^7.6.0",
    "babel-loader": "8.0.6",
    "core-js": "^3.3.2",
    "css-loader": "^3.2.0",
    "jquery": "^3.4.0",
    "mini-css-extract-plugin": "^0.8.0",
    "modernizr-webpack-plugin": "^1.0.7",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "promise-polyfill": "^8.1.3",
    "regenerator-runtime": "^0.13.3",
    "sass": "^1.22.12",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "swiper": "^5.1.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-fix-style-only-entries": "^0.4.0",
    "webpack-subresource-integrity": "^1.3.4",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/preset-env": "7.6.3",
    "assets-webpack-plugin": "^3.9.10",
    "clean-webpack-plugin": "^3.0.0"
  }
}

Answer 1

因为我使用了 swiper，所以我被迫转译我的 node_modules 文件夹。我没有充分考虑这一点，发生的事情是 babel 转译了 MiniCssExtractPlugin。这导致了以下异常。我通过在 babel 规则中添加适当的“排除”属性解决了这个问题：

exclude: [
    /node_modules\/(css-loader|core-js|promise-polyfill|webpack|html-webpack-plugin|whatwg-fetch)\//
]

请注意，core-js 也被列入黑名单，因为它是转译库。这将导致__webpack_require__自我引用。