A component is made ready for release to NPM. The externals configuration is used to package excluded items:

const output = {
    filename: 'index.js'.path: path.resolve(__dirname, '.. /dist'),
    libraryTarget: 'umd',}const externals = {
    'react': 'React'.'react-dom': 'ReactDOM',}module.exports = {
    // ...
    output,
    externals,
}
Copy the code

Can’t find react.

At first thought is libraryTarget choose wrong, try several cycles, the side almost all type of target, or an error: either can’t find the react either says hooks cannot be used.

Externals externals externals externals externals

const externals = {
    'react': {
        root: 'React'.commonjs2: 'react'.commonjs: 'react'.amd: 'react'
    },
    'react-dom': {
        root: 'ReactDOM'.commonjs2: 'react-dom'.commonjs: 'react-dom'.amd: 'react-dom'
    },
    'react-router-dom': {
        root: 'ReactRouterDOM'.commonjs2: 'react-router-dom'.commonjs: 'react-router-dom'.amd: 'react-router-dom'}}Copy the code

So is webpack 4 updating the configuration of externals? Take a look at the official website and sure enough:

Webpack.docschina.org/configurati…

Warning

A file of the form {root, AMD, commonJS… } objects are only allowed in configurations such as libraryTarget: ‘umd’. It is not allowed for other Library Targets configuration values.

Once you change the externals configuration, everything is fine.

The above.