时间戳

首页 > 解决方案 > 无法使新版本的暴露加载器和样式加载器工作

webpack - 无法使新版本的暴露加载器和样式加载器工作

问题描述

我真的需要帮助来弄清楚为什么我无法解决这些错误：

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 文档和指南。遵循了一些升级到 webpack 5 的指南。

我想要做的是从 webpack 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,
    },
});

标签： webpack

解决方案

仅供参考，通过添加禁用 url() 解析的内容解决了 css 文件不解析 url() 的问题：

options: {
            url: false,
        },

最终结果：

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

你可以在这里阅读： https ://webpack.js.org/loaders/css-loader/#boolean

options misses the property 'exposes'.更新expose-loader时仍然存在问题 ......

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

import "expose-loader?moment!moment";

改为：

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

非常感谢“alexander-akait”帮助我解决了这个问题： https ://github.com/webpack-contrib/expose-loader/issues/129

推荐阅读