1.3 webpack打包忽略依赖

最新推荐文章于 2025-07-24 10:09:34 发布

原创最新推荐文章于 2025-07-24 10:09:34 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #externals配置

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何在webpack.base.conf.js中通过externals配置排除G2库的CDN引入，并提供了解决直接使用new G2.Chart不通过import的实例。重点讲解了externals配置项在处理第三方库时的注意事项。

1、webpack.base.conf.js

//如下所示
externals:{
  "vue":"Vue",
  "vuex":"Vuex",
  "vue-router":"VueRouter",
  "velocity-animate":"Velocity",
  "axios":"axios",
  "@antv/g2":"G2"
}

2、在index.html中引入相关cdn

3、externals配置中排除G2的包时发现没有生效

直接使用new G2.Chart方式即可，不用使用import导入Chart包

export function readingInit(data) {
  const chart = new G2.Chart({
    container: 'chart1',
    autoFit: true,
    height: 250,
  });
  chart.data(data);
  chart.scale('borrowTotal', {
    alias: '次数'
  });
  chart.axis('name', {
    tickLine: null,
  });
  chart.tooltip({
    shared: true,
    showMarkers: false,
    title:'author'
  });
  chart.interaction('active-region');
  chart.axis('borrowTotal',
    {
      label: {
        formatter: text => {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }
      },
      title: {
        offset: 80,
        style: {
          fill: '#aaaaaa'
        },
      }
    }
  );
  chart
    .interval()
    .adjust('stack')
    .position('name*borrowTotal')
    .color('name', ['#40a9ff', '#1890ff', '#096dd9', '#0050b3']);
  chart.render();
  return chart
}