webpack dll配置不起作用

Question

I'm trying to create dll configuration with webpack 4, but i keep getting:

Uncaught ReferenceError: React is not defined

My configuration is very simple:

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")
    })
  ]
};

In my development configuration I use the dllreferenceplugin.

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

and of course i define externals in development configuration, because I don't want to include them again when building my development js file:

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

In my code I import React.

import * as React from "react";

But in the browser I keep getting React is not defined.

I have googled everything and have not found any solution to this problem?

Thank you for any help!

Answer 1

Use import React, { Component } from 'react'; myself. JSX wants react to be in scope.

Largely only see externals being used when making a library, like a npm module that other folks consume that uses React. React would be marked as an external in that package to avoid double including React in the local application and inside the module.

If this is your app build process, and not an npm module then should not be marking react as externals. Your bundle needs to include react. Marking react as externals excludes it from the bundle and makes it your responsibility to manually load React before the bundle is loaded.

The externals configuration option provides a way of excluding dependencies from the output bundles.

See the docs on webpack externals here .

Answer 2

Just Remove the external property from your app webpack config file.Also, Include the dll file in your index.html file.

I was also facing the same issue, because I was using both dllReference plugin and external at the same time.