Почему в моем браузере отображается пустая страница после разбиения кода на узлы модулей с помощью веб-пакета?

Question

Я пытаюсь оптимизировать быстродействие моего сайта путем разделения кода с помощью веб-пакета, в частности модулей моего узла, с каждым модулем, разбитым на свой собственный пакет.

Разделение пакета прекрасно работает для нашей собственной базы кода, нокогда я разделяю узлы модулей, браузер показывает пустую страницу без ошибок.Основной пакет успешно выбран, но, кажется, не выполняется должным образом.

Это мой конфигурационный файл webpack:

var webpack = require('webpack');
var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'static/public/js');
var APP_DIR = path.resolve(__dirname, 'static/js');
var CSS_DIR = path.resolve(APP_DIR, 'css');

var config_function = function(env){
  var config = {
    mode: env && env.prod ? 'production':'development',
    entry: ['babel-polyfill', APP_DIR + '/index.js'],
    output: {
      path: BUILD_DIR,
      filename: env && env.prod ? '[name].bundle.min.js' : '[name].bundle.js',
      publicPath: '/static/js/'
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups:{
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                        return `npm.${packageName.replace('@', '')}`;
                    },
                }
            }
        }
    },
    plugins: env && env.prod ? [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.DefinePlugin({
             'process.env.NODE_ENV': '"production"'
         }),
        new UglifyJSPlugin({uglifyOptions:{
            ecma: 5,
            mangle: {
                safari10: true
            },
            warnings: false,
            screw_ie8: true,
            compress: true,
        }}),
        new CompressionPlugin({
            algorithm: 'gzip',
            minRatio: 1})
    ]: [
        new BundleAnalyzerPlugin(),
    ],
    module: {
      rules: [{
        test: /\.jsx?/,
        include: [APP_DIR, /node_modules\/snakecase-keys/, /node_modules\/redux-api-middleware/,/node_modules\/map-obj/, /node_modules\/hare-niemeyer/, /node_modules\/round-to/, /node_modules\/styled-components/],
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2'], //, 'react-hmre']
          plugins: ['recharts']
        }
      }, {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /\.json$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      }, {
        test: /\.less$/,
        include: CSS_DIR,
        loaders: ['style-loader', 'css-loader', 'less-loader']
      }, {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader']
      }, {
          test: /\.(png|jpg)$/,
          loader: 'url-loader'
      },
    ]
    }
  };

  return config;
}

module.exports = config_function;

Разделение кода выглядит именно так, как я и ожидал: каждый пакет npm имеет свой собственный пакет, а остальная часть нашего собственного кода такжеуспешно разделен.Однако он просто не выполняется должным образом (т. Е. Пустая страница без ошибок).

Answer 1

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

Нужно было извлечь каждый отдельный модуль npm через скрипт в моем файле index.html, чтобы он работал.