webpack externals antd 打包不能移除antd的组件吗？

Question

问题描述

webpack

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router-dom':'ReactRouterDOM',
    'antd': 'antd'
  }

项目引入

import {Button as AntdButton} from 'antd-mobile';

webpack 配置

const path = require('path');
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合并配置的插件
const webpackMerge = require('webpack-merge');
// 用于分离 CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 删除冗余 CSS
const glob = require('glob');
const PurifyCssWebpack = require('purifycss-webpack');
const TerserPlugin = require('terser-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = webpackMerge(webpackBaseConfig, {
  // 指定模式
  mode: 'production',
  // 加载器
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader // creates style nodes from JS strings
          },
          {
            loader: 'css-loader' // translates CSS into CommonJS
          },
          {
            loader: 'postcss-loader' // Automatically add browser prefix
          },
          {
            loader: 'less-loader' // compiles Less to CSS
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件配置
  plugins: [
    new CleanWebpackPlugin(),
    new PurifyCssWebpack({
      paths: glob.sync(path.join(__dirname, '../*.html'))
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'css/[name].css'
      // chunkFilename: "[id].css"
    })
  ],
  optimization: {
    minimizer: [
      //压缩js
      new TerserPlugin({
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
      new TerserJSPlugin({
        extractComments: false,
        sourceMap: false,
        parallel: 4,
      }),
      //压缩css
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router-dom': 'ReactRouterDOM',
    'antd': 'antd'
  }
});

打包结果

b.defaultProps = {prefixCls: 'am-button', size: 'large', inline: !1, disabled: !1, loading: !1, activeStyle: {}}, e.default = b, n.exports = e.default;

打包过后还是能看到antd的代码，没有移除勿略掉！我想把它忽略掉不打进包里去通过cdn方式引入项目里面去！请问到底如何处理呢？

Answer 1

试试 'antd': 'antd-mobile'