webpack dll配置不起作用

Question

我试着用webpack 4创建动态链接库配置，但我一直收到：

Uncaught ReferenceError: React is not defined

我的配置非常简单：

module.exports = {
  entry: {
    vendor: ["react", "react-dom"]
  },
  output: {
    filename: "[name]-manifest.dll.js",
    path: base.path.project("build"),
    library: "[name]",
    libraryTarget: "umd"
  },
  plugins: [
    new webpack.DllPlugin({
      name: "[name]",
      path: base.path.project("build/[name]-manifest.json"),
      context: base.path.src("app")
    })
  ]
};

在我的开发配置中，我使用dllreferenceplugin。

new webpack.DllReferencePlugin({
  context: base.path.src("app"),
  manifest: require("../build/vendor-manifest.json")
})

当然，我在开发配置中定义了外部变量，因为我不想在构建开发js文件时再次包含它们：

  externals: {
    react: "React",
    "react-dom": "ReactDOM"
  }

在我的代码中我导入了React。

import * as React from "react";

但在浏览器中，我一直看到React未定义。

我已经谷歌了所有的东西，还没有找到任何解决这个问题的方法？

谢谢你的帮助！

Answer 1

我自己使用import React, { Component } from 'react';。JSX希望react在作用域内。

在很大程度上，只有在创建库时才会看到外部变量的使用，比如其他人使用React使用的npm模块。React将在包中标记为外部，以避免在本地应用程序和模块内部双重包含React。

如果这是您的应用程序构建过程，而不是npm模块，则不应将react标记为externals。您的捆绑包需要包含react。将react标记为externals会将其从捆绑包中排除，并使您有责任在加载捆绑包之前手动加载React。

外部配置选项提供了一种从输出包中排除依赖项的方法。

请参阅webpack外部here上的文档。

Answer 2

只需从您的应用程序删除外部属性，webpack配置dll文件，包括在您的index.html文件。

我也面临着同样的问题，因为我同时使用了dllReference插件和外部插件。