浏览器中正在运行的webpack输出抱怨'require'未定义

Question

我正在尝试为节点输出一个小型应用程序，并为网络输出另一个版本。我也有一个单独的配置。通过webpack运行后，我的浏览器控制台出现此错误：

external_"lodash":1 Uncaught ReferenceError: require is not defined
    at eval (external_"lodash":1)
    at Object.lodash (browser.js:507)
    at __webpack_require__ (browser.js:20)
    at eval (page.js:1)
    at Object../src/page.js (browser.js:429)
    at __webpack_require__ (browser.js:20)
    at eval (write-template.js:2)
    at Object../src/write-template.js (browser.js:474)
    at __webpack_require__ (browser.js:20)
    at eval (browser.js:2)
    at Object../src/browser.js (browser.js:319)
    at __webpack_require__ (browser.js:20)
    at eval (browser.js:1)
    at Object.0 (browser.js:485)
    at __webpack_require__ (browser.js:20)
    at browser.js:69
    at browser.js:72

---

/***/ "lodash":
/*!*************************!*\
  !*** external "lodash" ***!
  \*************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = require(\"lodash\");\n\n//# sourceURL=webpack:///external_%22lodash%22?");

/***/ }),

我以为Webpack可以解决require（）。这是我的webpack的配置：

{
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.hbs/,
        loader: 'handlebars-template-loader',
        query: {
          noEscape: true
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname,
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src/'),
      elements: path.resolve(__dirname, 'src/elements/')
    }
  },
  entry: ['./src/browser.js'],
  target: 'web',
  output: {
    path: path.join(__dirname, '../') + '/output',
    filename: 'browser.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '../') + '/output',
  }
}

我配置错误的方式吗？

Answer 1

这似乎与您如何定义the externals property有关，该问题告诉Webpack有关应从构建的应用程序包中排除的某些依赖项。默认情况下，所有依赖项的源代码（即externals）都与您的应用程序捆绑在一起。

node_modules属性的语法通常是一个对象，该对象将您的外部依赖关系映射到有关在运行时在何处查找这些依赖关系的信息。在大多数情况下，此信息是指向全局变量的字符串，在运行时可以在其中找到您的依赖项。因此，例如，以下配置从您的应用程序捆绑包中删除externals，并告诉Webpack在运行时可以找到lodash作为全局变量lodash：

'_'

当外部对象定义为数组时，如您在此处所做的那样，应用程序包中外部化依赖项的输出仅是

{
  externals: {
    lodash: '_'
  }
}

语句。在require是解析模块的已知功能的Node环境中，此方法可以很好地工作，但在没有require定义的浏览器环境中，则无法使用。这就解释了您在浏览器控制台中看到的错误。既然您说您的应用很小，为简单起见，我建议您完全摆脱Web捆绑软件的require配置。否则，请使用对象语法配置externals。