0

我有一个文件，我在其中导出多个 const，其中包含名为 icons.js 的子数组。

在另一个反应文件中，我们称之为 CloseButton.js。我只进口

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

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

我正在使用带有 @babel/preset-env 和 @babel/preset-react 的 webpack 4.30.0。

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 中定义的每个反应组件创建一个单独的文件？

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

4

1 回答 1

0

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

如：```export const myicon = ()=> {

返回（[，]）}```

于 2019-04-24T10:58:27.997 回答