Javascript 每次连续生成时，网页包包大小都会增加

我正在用webpack打包一个项目，以便将其用作库。它是一个组件库，所以我为位于

src/ui

下自己目录中的每个组件生成了小的包。这是一个示例组件：

src/
 |- ui/
    |-- anchor/
        |- dist/
        |- index.js
        |- _anchor.scss

我假装在

dist/index.js

中生成捆绑组件

在我当前的网页包配置中，如果我运行

NODE_ENV=production Webpack--display modules

，例如，在不更改任何代码的情况下连续运行三次，网页包输出为：

                   Asset      Size  Chunks             Chunk Names
    anchor/dist/index.js  4.69 KiB       0  [emitted]  anchor
anchor/dist/index.js.map  15.8 KiB       0  [emitted]  anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] external "react" 42 bytes {0} [built]
[1] external "classnames" 42 bytes {0} [built]
[2] ./src/ui/anchors/_anchor.scss 1.94 KiB {0} [built]
[3] ./node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]
[4] ./src/ui/anchor/index.js + 1 modules 1.69 KiB {0} [built]
    | ./src/ui/anchor/index.js 1.41 KiB [built]
    | ./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty.js 269 bytes [built]

如您所见，捆绑包大小在每次执行时增加约1kib

我当前的网页包配置为：

const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    anchor: './src/ui/anchor'
  },
  output: {
    path: path.resolve(__dirname, 'src', 'ui'),
    filename: '[name]/dist/index.js',
    library: ['components', '[name]'],
    libraryTarget: 'umd'
  },
  externals: {
    react: 'umd react',
    'react-dom': 'umd react-dom',
    'prop-types': 'umd prop-types',
    classnames: 'umd classnames'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|dist)/,
        loader: 'babel-loader',
        options: {
          presets: [require.resolve('babel-preset-react-app')],
        },
        enforce: 'pre',
      }, {
        test: /\.scss$/,
        use: [
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  devtool: 'source-map'
}

---

如何配置它以使捆绑包“重置”或保持不变？

在

库.filename

中，您配置了

[name]

选项，指定为您配置的每个条目分配一个特殊名称。通常只有在使用多个入口点时才使用此参数，我在这里没有看到

当你重新编译你的网页包时，你不应该“重置”任何东西。我猜在这个问题之后，文件大小并没有变得无限大，对吗

看看这个：

                   Asset      Size  Chunks             Chunk Names
    anchor/dist/index.js  6.71 KiB       0  [emitted]  anchor
anchor/dist/index.js.map  16.6 KiB       0  [emitted]  anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] ./src/ui/anchor/dist/index.js 5.7 KiB {0} [built]
[1] external "react" 42 bytes {0} [built]
[2] external "classnames" 42 bytes {0} [built]

const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    anchor: './src/ui/anchor'
  },
  output: {
    path: path.resolve(__dirname, 'src', 'ui'),
    filename: '[name]/dist/index.js',
    library: ['components', '[name]'],
    libraryTarget: 'umd'
  },
  externals: {
    react: 'umd react',
    'react-dom': 'umd react-dom',
    'prop-types': 'umd prop-types',
    classnames: 'umd classnames'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|dist)/,
        loader: 'babel-loader',
        options: {
          presets: [require.resolve('babel-preset-react-app')],
        },
        enforce: 'pre',
      }, {
        test: /\.scss$/,
        use: [
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  devtool: 'source-map'
}