Javascript 未捕获引用错误：网页包代码拆分后未定义导出

我正试图通过将我的webpack捆绑包拆分为两个捆绑包来优化其大小：

webpack bundle.js

，其中包含我的代码；以及

vendor bundle.js

，其中包含节点模块和第三方库。但在我成功创建了两个捆绑包之后，浏览器中出现了两个关于这两个捆绑包的错误：

Uncaught ReferenceError: exports is not defined at vendor-bundle.self-879f615019647c756dc959f99d735b3a2534b00805364ae6fca0091d1190d62d.js?body=1:1

这是我的

webpack.config.js

const config = {
  "entry": {
    "webpack-bundle": "./app/registration",
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "exclude": /node_modules/,
        "test": /\.jsx?$/,
        "use": {
          "loader": "babel-loader",
          "options": {
            "plugins": [
              "@babel/plugin-proposal-class-properties",
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              "@babel/plugin-proposal-export-namespace-from",
              "@babel/plugin-proposal-function-sent",
              "@babel/plugin-proposal-json-strings",
              "@babel/plugin-proposal-numeric-separator",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-proposal-throw-expressions",
              "@babel/plugin-syntax-dynamic-import",
              "@babel/plugin-syntax-import-meta",
              "@babel/plugin-transform-react-jsx"
            ],
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      }
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin(),
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },

  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  },
  "target": "node"
};

module.exports = config;

这是我的

.babelrc

：

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-react-jsx"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

我们使用React、Rails、React-on-Rails和Slim。要加载网页包，我要将其添加到我的

应用程序中。slim

：

  = javascript_include_tag 'vendor-bundle'
  = javascript_include_tag 'webpack-bundle'

---

我希望能够提供我创建的两个捆绑包。我配置网页包和拆分捆绑包的方式是否有任何错误？或者我应该安装其他东西吗？

在网页配置的底部，您的目标模式设置为节点

在节点中，

module

和

module.exports

都存在，但它们在浏览器中不存在-这就是导致错误的原因

如果您删除这一行，webpack将假定您的目标是浏览器，并将为您转换这一行-然后您的捆绑包将按预期在浏览器中运行

  = javascript_include_tag 'vendor-bundle'
  = javascript_include_tag 'webpack-bundle'