为什么我的浏览器在用webpack代码拆分节点模块后显示空白页?

为什么我的浏览器在用webpack代码拆分节点模块后显示空白页?,webpack,Webpack,我试图通过使用webpack(特别是我的节点模块)拆分代码,并将每个模块拆分为自己的包,从而优化我的站点的速度性能 捆绑包拆分对于我们自己的代码库来说很好,但是当我拆分节点模块时,浏览器会显示一个没有错误的空白页面。已成功获取主捆绑包,但似乎未正确执行 这是我的网页包配置文件: var webpack = require('webpack'); var path = require('path'); const UglifyJSPlugin = require('uglifyjs-webpack

我试图通过使用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包都有自己的包,我们自己的其余代码也被成功拆分。但是,它没有按预期执行(即空白页,没有错误)。

我误解了这项技术,认为运行时包负责动态获取各个npm模块

必须通过index.html文件中的脚本获取每个单独的npm模块以使其工作