在浏览器中运行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

---

我以为webpack会修复require（）。以下是我的网页包的配置：

{
  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某些应该从构建的应用程序包中排除的依赖项。默认情况下，所有依赖项（即

node\u模块

）的源代码都与应用程序捆绑在一起

externals

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

lodash

，并告诉Webpack可以在运行时将

lodash

作为全局变量

“

：

{
  externals: {
    lodash: '_'
  }
}

---

当externals被定义为数组时，正如您在这里所做的那样，应用程序包中的外部化依赖项的输出只是一个

require

语句。在

require

是解析模块的已知函数的节点环境中，这可以很好地工作，但在没有定义

require

的浏览器环境中，这不起作用。这就解释了您在浏览器控制台中看到的错误。既然你说你的应用程序很小，为了简单起见，我建议你完全不要为你的web包配置

externals

。否则，请使用对象语法来配置

externals

您找到了吗？

{
  externals: {
    lodash: '_'
  }
}