Question

我有一个文件，用于导出多个带有子数组的const（称为icons.js）。

在另一个反应文件中，将其命名为CloseButton.js。我只导入

import { cross } from './icons.js';

，当我在启用了生产模式的情况下运行webpack时，所有其他图标似乎也已导入（icons.js const的导出量接近100kB左右，但单行不应大于1kB）到转译的CloseButton.js。

我正在将Webpack 4.30.0与@ babel / preset-env和@ babel / preset-react一起使用。

webpack.config.js

const config = {
  entry: './CloseButton.js',
  output: {
    filename: 'CloseButton.js',
  },
  plugins: [],
  module: {
    rules: [
      {
        test: /\.js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              modules: false
            }], '@babel/preset-react']
          }
        }
      }
    ]
  },
  mode: 'production'
};

module.exports = config;

我测试了运行相同的设置，但只从icons.js导出了字符串，然后代码正确地排除了无效代码。

有人知道是否有一种方法可以仅从icons.js文件中导出“叉号”，而无需为icons.js中定义的每个react组件创建单独的文件吗？

我已经测试了从icon.js中删除所有导出为React组件的const引用，并且可以，但是这不能导出图标。

Answer 1

我发现了问题，基本上我是直接在export const myicon = [<path></path>, <path />];上设置react组件的，相反，它当然需要用函数调用包装。

如：```export const myicon =（）=> {

返回（[，]） }```

我如何才能使树状摇动才能用于导出多个React组件的文件？

1 个答案: