Question

我尝试使用webpack 4创建dll配置，但我一直在努力：

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的npm模块一样。 React将在该程序包中标记为外部，以避免在模块内的本地应用程序和中包含React的双重内容。

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

externals配置选项提供了一种排除方式来自输出包的依赖关系。

请参阅webpack externals here上的文档。

Answer 2

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

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

webpack dll配置不起作用

2 个答案: