Webpack 4.0: производственная конфигурация не создает файлы фрагментов пакетов

Я пытаюсь оптимизировать размер сборки и пакета моего проекта. Однако всякий раз, когда я запускаю npm run build, в моей папке /dist не создаются файлы блоков пакетов. Однако npm run dev прекрасно создает фрагменты пакета в моей папке /dist. Единственная разница между двумя сценариями npm заключается в том, что build использует мои webpack.prod конфигурации, а dev использует мои webpack.dev конфигурации.

Вывод npm run build в моем терминале, по-видимому, указывает на то, что он создает все указанные мной фрагменты (я создаю один фрагмент для основного пакета и один фрагмент для каждого модуля узла, чтобы свести к минимуму пакеты, которые пользователь должен загружать каждый раз, когда мы обновляем наш проект) .

Я не уверен, есть ли какое-то поведение по умолчанию в производственном режиме Webpack, которое вызывает это.

npm run build Вывод:

Вот два моих файла конфигурации Webpack:

Webpack.prod:

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'production',
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    devServer: {
      contentBase: 'dist',
      port: 3000,
      historyApiFallback: true,
      inline: true,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true },
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};

Webpack.dev:

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'development',
    devtool: "inline-source-map",
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    // Enable sourcemaps for debugging webpack's output.
    devServer: {
      contentBase: 'dist',
      historyApiFallback: true,
      inline: true,
      port: 3000,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
          test: /\.tsx?$/,
          loader: "ts-loader"
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        {
          enforce: "pre",
          test: /\.js$/,
          loader: "source-map-loader",
          exclude: [/node_modules/, /build/, /__test__/],
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
        {
          test: /\.js$/,
          loader: 'babel-loader'
        }
      ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
      // "react": "React",
      // "react-dom": "ReactDOM"
    },

    performance: { hints: false },

    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true  } ,
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};