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有关应从构建的应用程序包中排除的某些依赖项。默认情况下，所有依赖项（例如node_modules）的源代码都与您的应用程序捆绑在一起。

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

{
  externals: {
    lodash: '_'
  }
}

当外部函数定义为数组时（如您在此处所做的那样），应用程序包中外部化依赖项的输出就是一个require语句。在require是解析模块的已知函数的Node环境中，此方法可以很好地工作，但在没有require的定义的浏览器环境中，此方法不起作用。这就解释了您在浏览器控制台中看到的错误。既然您说您的应用很小，为简单起见，我建议您完全放弃您的Web捆绑包的externals配置。否则，请使用对象语法配置externals。

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

1 个答案: