Uncaught ReferenceError: exports is not defined after Webpack Code Split

Question

我试图通过将其分成两个包来优化我的 webpack 包大小：webpack-bundle.js，其中包含我的代码，vendor-bundle.js，其中包含节点模块和第三方库。但是在我成功创建了两个包之后，我在浏览器中收到了两个关于这两个包的错误：

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

Uncaught TypeError: Cannot read property 'call' of undefined at I (webpack-bundle.self-78221fc03008c178fe970b69731594f14d651dab84e5cf928beacc805ebde79c.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，在 Rails 和 Slim 上使用 React。要加载 webpack，我会将其添加到我的 application.slim:

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

我希望能够为我创建的两个包提供服务。我配置 webpack 和拆分包的方式有什么问题吗？或者我应该安装其他东西吗？

Answer 1

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

在节点中，module 和 module.exports 都存在，但这些在浏览器中不存在 - 这就是导致错误的原因

如果你删除这一行，webpack 会假定你的目标是浏览器，并且还会为你转换这一行 - 然后你的包应该运行在浏览器中如预期的那样。

Uncaught ReferenceError: exports is not defined after Webpack Code Split

Uncaught ReferenceError: exports is not defined after Webpack Code Split

javascript

ruby-on-rails

slim-lang

webpack