在浏览器中运行 webpack 输出抱怨“require”未定义答案

【问题标题】：Running webpack output in browser complains 'require' is not defined在浏览器中运行 webpack 输出抱怨“require”未定义
【发布时间】：2018-08-13 20:50:57
【问题描述】：

我有一个小应用程序，我正在尝试为 node 和另一个版本的 web 输出。我也有每个单独的配置。我的浏览器控制台通过 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',
  }
}

我是否配置错误？

【问题讨论】：

你弄明白了吗？

标签： webpack require

【解决方案1】：

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

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

{
  externals: {
    lodash: '_'
  }
}

当 externals 被定义为数组时，正如您在此处所做的那样，应用程序包中外部化依赖项的输出只是一个 require 语句。这在 require 是解析模块的已知函数的 Node 环境中可以正常工作，但在没有 require 定义的浏览器环境中不起作用。这解释了您在浏览器控制台中看到的错误。由于您说您的应用程序很小，为了简单起见，我建议您完全摆脱 externals 配置为您的 web 包。否则，使用对象语法配置externals。

【讨论】：