具有 Module.noParse 的 Webpack 2.2.0 不会转译 'require' 外部对象

Question

我正从 Webpack 1.x 迁移到 2.x 并遇到了麻烦。我想让 Webpack 忽略我所有供应商的库，因为我通过 gulp 准备了它们。

在 webpack.config.js 我有 module.noParse 喜欢：

noParse: /react|react-dom|redux|react-redux|lodash/

我有 externals 部分：

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'lodash': '_',
}

所以，在 Webpack 1.x 中它工作得很好，但是版本 2.2.0 给出：

var _react = require('react');

Uncaught ReferenceError: require is not defined`

如果我删除 noParse 规则，webpack 将在包中包含供应商，所有内容都将用 var react = webpack_require 包装并且工作正常。

Answer 1

Webpack 2 比它的前身更严格。它向您暗示您可能配置错误。

require

noParse 会按设计抛出。
externals 告诉打包器不要进入外部包，而是用全局变量替换它们的导入。

因此，externals 就是您所需要的。

更简洁的方法

我建议完全放弃 gulp 任务并将您的 react / lodash 捆绑移动到 Webpack 供应商块中。使用 expose-loader 在全局 window 变量上导出模块。

以下配置应该可以做到：

module.exports = {
  entry: {
    "vendor": [
      "expose-loader?React!react",
      "expose-loader?ReactDOM!react-dom",
      "expose-loader?Redux!redux",
      "expose-loader?ReactRedux!react-redux",
      "expose-loader?_!lodash"
    ],
    "app": "./app/index.js"
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'lodash': '_',
  },
  "plugins": [
    new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity }))
  ],
  /* other options... */
}

^{确保您 npm i -D expose-loader 并将 src 属性设置为 url of vendor.js}[ 的脚本添加到您的页面=25=]

具有 Module.noParse 的 Webpack 2.2.0 不会转译 'require' 外部对象

Webpack 2.2.0 with Module.noParse doesn't transpile 'require' of externals

webpack

webpack-2

更简洁的方法