Webpack4散记（6）umd与externals

做了一个组件，准备发布到npm。使用externals配置打包剔除的项目：

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

然后报错说找不到react。

刚开始以为是libraryTarget选错了，试了几个轮回，把所有的target类型都过了一边几乎，还是报错：要么是找不到react，要么是说hooks不能这么用。

网上找了半天，发现一个这样的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'
    }
}

所以是webpack 4对externals的配置升级了吗？看一下官网，果然：

webpack.docschina.org/configurati…

Warning

一个形如 { root, amd, commonjs, ... } 的对象仅允许用于 libraryTarget: 'umd' 这样的配置.它不被允许 用于其它的 library targets 配置值.

更改externals配置后，一切就很OK了。

以上。