问题描述

我在自己react demo里面按照官方提供的懒加载方法实现懒加载，但是webpack打包之后，为什么没有异步的chunk文件产生了

问题出现的平台版本及自己尝试过哪些方法

查过很多文章都没找到合适的解决方法

相关代码

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); webpack4.x不适合用了，用mini-css-extract-plugin代替
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const Autoprefixer = require('autoprefixer');
const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');

module.exports = env => {
  // 规则配置
  const rules = [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(jpg|jpeg|png|gif|svg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
    {
      test: /\.less$/,
      use: [
        env.NODE_ENV === 'development'
          ? 'style-loader'
          : MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [Autoprefixer()]
          }
        },
        'less-loader'
      ]
    }
  ];

  const plugins = {
    development: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin()
    ],
    production: [
      new CleanWebpackPlugin(['dist']),
      new MiniCssExtractPlugin({
        filename: '[name].min.css'
      }),
      new OptimizeCssAssetsWebpackPlugin(), // 压缩提取的css文件
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        injetc: 'body'
      }),
      new BundleAnalyzerPlugin()
    ],
    test: [new BundleAnalyzerPlugin()]
  };

  const webpackConfig = {
    entry: {
      index: './src/index.js'
    },
    devtool: 'nosources-source-map',
    output: {
      filename: '[name].[hash].js',
      chunkFilename: '[name].chunk.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [...rules]
    },
    // 优化
    optimization: {
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        maxAsyncRequests: 10,
        cacheGroups: {
          default: false,
          async: {
            name: 'async',
            chunks: 'async',
            minChunks: 1,
            minSize: 1,
            priority: 20
          },
          common: {
            name: 'common',
            chunks: 'initial',
            minChunks: 1,
            minSize: 1,
            priority: 0
          },
          vander: {
            name: 'base',
            test: /node_modules/,
            chunks: 'initial',
            minChunks: 1,
            priority: 10
          }
        }
      }
    },

    // 插件
    plugins: [
      new webpack.DefinePlugin({
        NODE_ENV: JSON.stringify(env.NODE_ENV)
      }),
      ...plugins[env.NODE_ENV]
    ]
  };

  // 是否是开发模式
  if (env.NODE_ENV === 'development') {
    webpackConfig.devServer = {
      hot: true,
      hotOnly: true
    };
  }
  console.log(webpackConfig);
  return webpackConfig;
};

你期待的结果是什么？实际看到的错误信息又是什么？

我想要的结果是，按照正常的流程，打包出那几个路由对应的chunks文件

react demo代码

import React from 'react';
import { Route, NavLink } from 'react-router-dom';
import Loadable from 'react-loadable';
import loadable from '@loadable/component';
import { Layout, Menu } from 'antd';
import './index.less';

const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;

class Home extends React.Component {
  shouldComponentUpdate() {}

  render() {
    return (
      <Layout className="home-component">
        <Header />
        <Layout>
          <Sider theme="dark">
            <Menu className="menu">
              <Menu.Item>
                <NavLink to="/home/discover">搜索</NavLink>
              </Menu.Item>
              <Menu.Item>
                <NavLink to="/home/visilize">
                  可视化
                </NavLink>
              </Menu.Item>
              <Menu.Item>
                <NavLink to="/home/dashboard">
                  仪表盘
                </NavLink>
              </Menu.Item>
              <Menu.Item>
                <NavLink to="/home/data">数据源</NavLink>
              </Menu.Item>
              <Menu.Item>
                <NavLink to="/home/alarm">警告</NavLink>
              </Menu.Item>
              <Menu.Item>
                <NavLink to="/machine">机器学习</NavLink>
              </Menu.Item>
              <SubMenu title={<span>管理</span>}>
                <Menu.Item>
                  <NavLink to="/authority-manage">
                    权限管理
                  </NavLink>
                </Menu.Item>
                <Menu.Item>
                  <NavLink to="/role-manage">
                    角色管理
                  </NavLink>
                </Menu.Item>
                <Menu.Item>
                  <NavLink to="/leaver">全责分离</NavLink>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Content>
            <Route
              path="/home/discover"
              component={loadable(() =>
                import('../Discover')
              )}
            />
            <Route
              path="/home/visilize"
              component={loadable(() =>
                import('../Visilize')
              )}
            />
            <Route
              path="/home/dashboard"
              component={loadable(() =>
                import('../Dashboard')
              )}
            />
            <Route
              path="/home/data"
              component={loadable(() => import('../Data'))}
            />
            <Route
              path="/home/alarm"
              component={loadable(() => import('../Alarm'))}
            />
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default Home;