после разделения чанков в веб-пакете не удается запустить приложение - PullRequest
Новая
       10

после разделения чанков в веб-пакете не удается запустить приложение

0 голосов
/ 14 сентября 2018

в моем приложении реакции я использую webpack 4, до реализации split chunk все работало нормально, но после splitChunks генерируется файл vendor.js, который также отображается в html-файле, но страница пуста. мой веб-пакет файл 

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CompressionPlugin = require('compression-webpack-plugin');
const VENDOR_LIBS =[
  'antd','axios','moment','rc-time-picker','react',
  'react-dom','react-ga','react-google-maps','react-loadable',
  'react-redux','react-router','react-router-dom','recompose','redux','redux-thunk'
];
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    entry:{
      vendor: VENDOR_LIBS,
      main: './src/app.js',
    },
    output: {
      path: path.join(__dirname, 'public'),
      filename: '[name].chunkhash.bundle.js',
      chunkFilename: '[name].chunkhash.bundle.js',
    },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
          }
      },
      {
        test: /\.s?css$/,
        use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },{
                test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: "file-loader",
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
            }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
            }),
    new WebpackMd5Hash(),
    new CompressionPlugin({
      algorithm: 'gzip',
      test : /\.js$|\.css$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
      }),
    ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true
        },
      }
    },
    runtimeChunk: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
};

и in my / src / index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">
    <title>Book Ambulance - Stanplus</title>
</head>

<body>

    <div id="app">

    </div>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
    <script src="<%= htmlWebpackPlugin.files.chunks.vendor.entry %>"></script>
</body>
</html>

вы можете загружать эти файлы в браузер, но страница пуста enter image description here У меня есть вопросы
a) , почему мое приложение не показывает ничего, даже если нет ошибки ( может быть что-то в выводе splitChunks или html page ).
b) после выполнения UglifyJsPlugin, CompressionPlugin и динамического добавления маршрутов и импорта libs / files, а также размер моего файла vendor.js составляет 580 КБ , за исключением всех этих методов как я могу уменьшить размер моего файла vendor.js

...