Webpack 从 v4 迁移到 v5，expose-loader 抛出错误

Question

尝试将 webpack 从版本 4.44.2 更新到最新版本 5.58.2，我想有重大变化。 暴露加载器已设置，但抛出错误。

这是 package.json 文件的一个片段

    "expose-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "oidc-client": "^1.11.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "typescript": "^3.9.10",
    "url-loader": "^4.1.1",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.1",

这是 webpack.config.js 文件的设置

module.exports = env => ({
  watch: !env.production,
  mode: env.production ? "production" : "development",
  entry: {
    style: "./styles/style.scss",
    client: [
      "./ts/client-polyfills.ts",
      "expose-loader?React!react",
      "expose-loader?ReactDOM!react-dom",
      "expose-loader?Components!./components"
    ],
    server: [
      "./ts/server-polyfills.ts",
      "expose-loader?React!react",
      "expose-loader?ReactDOM!react-dom",
      "expose-loader?ReactDOMServer!react-dom/server",
      "expose-loader?Components!./components"
    ]
  },

这是我尝试过的另一种设置公开加载程序的方法......

module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'expose-loader',
          options: 'React'
        }
      },
      {
        test: require.resolve('react-dom'),
        use: {
          loader: 'expose-loader',
          options: 'ReactDOM'
        }
      },
      {
        test: require('.\/components'),
        use: {
          loader: 'expose-loader',
          options: 'Components'
        }
      },
      {
        enforce: "pre",
        test: /\.scss$/,
        exclude: /node_modules/,
        use: "import-glob"
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [{ loader: "ts-loader" }]
      },
      {
        test: /\.(svg|png|jpg|woff2?|ttf|eot)$/,
        enforce: "pre",
        use: {
          loader: "file-loader",
          options: {
            expose:{
            globalName : "[name].[hash].[ext]",
            moduleLocalName:"ext",
            override:true
            }
          }
        }
      }
    ]
  },

我得到的错误是

ERROR in ./node_modules/react-dom/server.browser.js (./node_modules/expose-loader/dist/cjs.js?exposes=ReactDOMServer!./node_modules/react-dom/server.browser.js)
Module build failed (from ./node_modules/expose-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (C:\**\ClientApp\node_modules\expose-loader\dist\index.js:19:24)
@ ./components (multi ./ts/server-polyfills.ts expose-loader?exposes=React!react expose-loader?exposes=ReactDOM!react-dom expose-loader?exposes=ReactDOMServer!react-dom/server (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-2 expose-loader?exposes=Components!./components) server[3]

Answer 1

下面是我们如何最终让它工作：（通过使用暴露=关键字）

client: [
    "./ts/client-polyfills.ts",
    "expose-loader?exposes=React!react",
    "expose-loader?exposes=ReactDOM!react-dom",
    "expose-loader?exposes=Components!./components"
 ],
server: [
   "./ts/server-polyfills.ts",
   "expose-loader?exposes=React!react",
   "expose-loader?exposes=ReactDOM!react-dom",
   "expose-loader?exposes=ReactDOMServer!react-dom/server",
   "expose-loader?exposes=Components!./components"