Webpack генерирует файл [hash] .worker. js при упаковке пользовательской библиотеки

Question

Я пытаюсь создать библиотеку реактивных компонентов многократного использования для внутреннего использования.

Webpack связывает вывод - который должен быть одним файлом. Но на самом деле он выпускает пакет. js, который я ожидал бы плюс файл с именем [some_hash] .worker. js.

Я не уверен, как заставить Webpack, чтобы включить этот «рабочий» файл с одним пакетом, который я запрашиваю.

Webpack.config:

const path = require('path');
const webpack = require('webpack');

const DIST_PATH = path.resolve(__dirname, "../dist");
const SRC_PATH = path.resolve(__dirname, "../src");
const APP_PATH = path.resolve(__dirname, "../src/index.js");
const BASE_PATH = path.resolve(__dirname);
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = ({ appPath = APP_PATH, distPath = DIST_PATH }) => ({
  context: BASE_PATH,
  devServer: {
    contentBase: distPath,
    compress: true,
    port: 9000,
    historyApiFallback: true
  },
  resolve: {
    modules: ['node_modules', SRC_PATH],
    alias: {
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    }
  },
  externals: {
      // Don't bundle react or react-dom
      react: {
        commonjs: "react",
        commonjs2: "react",
        amd: "React",
        root: "React"
      },
      "react-dom": {
        commonjs: "react-dom",
        commonjs2: "react-dom",
        amd: "ReactDOM",
        root: "ReactDOM"
      }
  },
  entry: {
    bundle: appPath,
  },
  output: {
    path: distPath,
    filename: 'index.js',
    publicPath: '/dist/',
    library: 'internal-components',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-syntax-dynamic-import',
              [ '@babel/plugin-proposal-decorators', { 'legacy': true } ],
              [ '@babel/plugin-proposal-class-properties', { 'loose': true } ]
            ]
          }
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-syntax-dynamic-import',
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              ["@babel/plugin-proposal-class-properties", {'loose': true}]
            ]
          }
        }
      },
      ...
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    })
  ]
});

Answer 1

Вы можете попробовать использовать плагин worker-loader со встроенным для обработки связывания -

rules: [
      ...
      {
        test: /\.worker\.js$/,
        use: {
           loader: 'worker-loader',
           options: { inline: true, fallback: false }
        }
      }
    ]

Тем не менее, в Github есть несколько открытых проблем, связанных с использованием работника в качестве blob, поэтому YMMV

Answer 2

На самом деле, если вы используете веб-пакет 3 и выше, разбиение пакета выполняется автоматически. В документации плагина SplitChunks здесь фактически указано, как это происходит.

Так что из-за этого вам может понадобиться отсканировать код и проверить наличие таких условий. Также хорошо знать, импортируете ли вы какой-то модуль асинхронно? Это может сигнализировать о том, что веб-пакет превращается в отдельный фрагмент.