javascript - 入口点构建时出现 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

const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SriPlugin = require('webpack-subresource-integrity');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: {
        runtime: ['./js/runtime.js', './css/inline.scss'],
        vendor: ['./js/vendor.js']
    },
    output: {
        path: path.resolve(__dirname, '../assets/js'),
        filename: '[name].[contenthash].js',
        crossOriginLoading: 'anonymous'
    },
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                    minChunks: 2
                }
            }
        },
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                extractComments: '/@extract/i'
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorPluginOptions: {
                    preset: ['default', {discardComments: { removeAll: true } }],
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader'
                }],
                include: [
                    path.resolve('js'),
                    path.resolve('node_modules')
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                indentWidth: 4,
                                includePaths: ['css/*/'],
                            },
                        },
                    },
                ]
            }
        ]
    },
    plugins: [
        new SriPlugin({
            hashFuncNames: ['sha256', 'sha384'],
            enabled: true
        }),
        new AssetsPlugin({
            filename: 'assets.json',
            integrity: true,
            prettyPrint: true,
            path: path.resolve(__dirname, '../config')
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[name].[contenthash].css'
        }),
        new CleanWebpackPlugin(),
        new FixStyleOnlyEntriesPlugin()
    ]
};

包.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__ self 引用。