杨乐乐
Never too late

Follow

Never too late

Follow
Ant Design Pro 如何自定义配置额外 Webpack 插件

Photo by Kevin Bhagat on Unsplash

Ant Design Pro 如何自定义配置额外 Webpack 插件

杨乐乐's photo
杨乐乐
·Dec 24, 2022·

1 min read

最近需要完成一个需求:血缘图的展示,在 Github 上找到了一个开箱即用的项目 react-lineage-dag,是阿里出的一个用于表示表与表之间,表和其他关联实体之间关系的图。

测试了一下 demo,也都符合预期,但是当使用从 npm 库中下载下来的包时,编译时报错了,说不认识包中的 $,意识到是使用了 jQuery了。

解决这个问题也很简单

  1. 安装 jquery
    npm install jquery --save
    
  2. 使用 ProvidePlugin

ProvidePlugin是一个 webpack 插件,用于自动加载某一模块,当一个项目很多地方都使用同一模块时,这个插件可以省去多个地方写 import/require

可以在 webpack 配置文件中 plugin 字段中添加:

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
    });
]

表示的意思是:当打包时遇到不能识别的$jQuerywindow.jQuerywindow.$webpack就自动去加载jquery模块。

但是如何在Ant Design Pro中去使用呢,由于使用了umiwebpack进行了封装,在Ant Design Pro中暴露的位置是 config/config -> chainWebpack字段中。具体的用法可以看chainWebpack官方文档

所以只需要在chainWebpack字段中添加如下代码

chainWebpack(config, { env, webpack }) {

    config

        .plugin('providerPlugin')

        .use(webpack.ProvidePlugin, [{

            $: 'jquery',

            jQuery: 'jquery',

            'window.jQuery': 'jquery',

            'window.$': 'jquery',

        }]
    )
},

配置其他插件,或对webpack进行其他配置优化等也可使用相同的方法

 
Share this