Webpack 无法使新版本的expose loader和style loader正常工作

我真的需要帮助找出我无法解决这些错误的原因：

Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/images/loading.gif'

错误源于此行：

background: url(/images/loading.gif) center center no-repeat;

然后我们有这个：

_ERROR in ../node_modules/moment/moment.js (../node_modules/expose-loader/dist/cjs.js?moment!../node_modules/moment/moment.js)
Module build failed (from ../node_modules/expose-loader/dist/cjs.js):
ValidationError: Invalid options object. Expose Loader has been initialized using an options object that does not match the API schema.
 - options misses the property 'exposes'. Should be:
   non-empty string | object { globalName, moduleLocalName?, override? } | [non-empty string | object { globalName, moduleLocalName?, override? }, ...] (should not have fewer than 1 item)_

我不知道该向哪里求助。我在谷歌上搜索了很多，阅读了很多网页文档和指南。遵循几条升级到webpack 5的指南

我想做的是从第4页更新到第5页。有了这些，我将expose loader从0.7.5更新到2.0.0，将css loader从3.5.3更新到5.2.4。 现在我无法通过上面的错误，我得到了几个指向不同文件的错误，其中一些是入口文件

出于测试目的，我回滚了所有内容，并将expose loader更新为1.0.3（2.0.0仅适用于WP5），将css loader更新为5.2.4，并且在相同的文件上再次出现相同的错误。所以我猜webpack.config的配置一定有问题

const path = require("path");

module.exports = {
    context: path.join(__dirname, "Bla"),
    entry: {
        bla: ["./bla"],
        bla_app: ["./bla_app"],
        bla2: ["@babel/polyfill", "./bla2"], //need @babel/polyfill for pechkin
        bla3: ["./bla3"],
        bla4: ["./bla4"],
        bla_5: ["@babel/polyfill", "./SinglePage/bla_5.js"], //need @babel/polyfill for redux/saga in IE
        bla_6: ["@babel/polyfill", "./SinglePage/bla_6.js"], //need @babel/polyfill for redux/saga in IE
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "wwwroot", "build"),
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                loader: "url-loader?limit=100000",
            },
            // Expose jquery so that it is possible to use jquery in client that is
            // extended by plugins, for example bootstrap-select
            {
                test: require.resolve("jquery"),
                loader: "expose-loader?$!expose-loader?jQuery",
            },
            // Expose jquery so that it is possible to use jquery in client that is
            // extended by plugins, for example bootstrap-select
            {
                test: /jquery\..*\.js/,
                loader: "imports?$=jquery,jQuery=jquery,this=>window",
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
        //........//
        },
    },
};

以及.dev.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        contentBase: "./build",
        disableHostCheck: true,
    },
});

在我尝试更新到WP5后，相同文件的外观：

const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    context: path.join(__dirname, "Bla"),
    plugins: [
        new ESLintPlugin({
            extensions: ["js", "jsx"],
            exclude: ["node_modules"]
        }),
        // new webpack.ProvidePlugin({
        //  $: 'jquery',
        //  jQuery: 'jquery',
        // }),
        // new webpack.ProvidePlugin({
        //  _: 'lodash',
        // }),
    ],
    entry: {
     bla: ["./bla"],
    bla_app: ["./bla_app"],
    bla2: ["@babel/polyfill", "./bla2"], //need @babel/polyfill for pechkin
    bla3: ["./bla3"],
    bla4: ["./bla4"],
    bla_5: ["@babel/polyfill", "./SinglePage/bla_5.js"], //need @babel/polyfill for redux/saga in IE
    bla_6: ["@babel/polyfill", "./SinglePage/bla_6.js"], //need @babel/polyfill for redux/saga in IE
    },
    output: {
        publicPath: 'auto',
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "wwwroot", "build"),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 100000,
                    }
                }],
                type: 'javascript/auto',
            },
            {
                // Expose jquery so that it is possible to use jquery in client that is
                // extended by plugins, for example bootstrap-select
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            },
            // Expose jquery so that it is possible to use jquery in client that is
            // extended by plugins, for example bootstrap-select
            {
                test: /jquery\..*\.js/,
                use: "imports?$=jquery,jQuery=jquery,this=>window",
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
        //........//
        },
    },
};

.dev.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");

module.exports = merge(common, {
    mode: "development",
    devtool: "eval-source-map",
    devServer: {
        contentBase: path.join(__dirname, "./build"),
        historyApiFallback: true,
    },
});

---

仅供参考，通过添加禁用url（）解析的选项，解决了css文件不重新加载url（）的问题：

options: {
            url: false,
        },

最终结果：

        {
            test: /\.css$/i,
            use: ["style-loader", {
                loader: "css-loader",
                options: {
                    url: false,
                },
            }],
        },

您可以在此处阅读：

选项仍然存在问题，将丢失属性“exposes”。

更新expose loader时

编辑： 我们在代码库中有这样的内联公开：

import "expose-loader?moment!moment";

改为：

import $ from "expose-loader?exposes=moment!moment";

非常感谢帮助我解决问题的“alexander akait”：