React＆Webpack 4-延迟加载-无法生成块文件

Question

我希望有人可以指导我解决这个问题。我正在尝试使用react 16和webpack 4设置延迟加载。我按照指南进行操作，并复制了.babelrc，webpack配置文件，以匹配其他工作示例。但是我无法在项目中生成块文件。

我还在运行Express Server（API），并通过使用nodemon启动webpack开发服务器和Express Server：

  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

这是webpack编译bundle.js时的输出。

i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: a0bec46949ac77f6330c
Version: webpack 4.12.0
Time: 2782ms
Built at: 2018-09-05 22:59:39
     Asset       Size  Chunks             Chunk Names
 bundle.js   4.01 MiB    main  [emitted]  main
index.html  577 bytes          [emitted]
Entrypoint main = bundle.js

这是我的.babelrc配置：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions"]
        }
      }
    ],
    "stage-2",
    "react"
  ],
  "plugins": ["syntax-dynamic-import", "transform-class-properties"]
}

这是webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpacPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js',
    publicPath: ''
  },
  resolve: {
    extensions: ['.js', 'jsx']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                autoprefixer({
                  browsers: ['> 1%', 'last 2 versions']
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=8000&name=images/[name].[ext]'
      }
    ]
  },
  plugins: [
    new HtmlWebpacPlugin({
      template: __dirname + '/src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ],
  devServer: {
    historyApiFallback: true,
    proxy: {
      '/api': 'http://localhost:4000'
    }
  }
};

Package.json

{
  "name": "react_webpack_starter",
  "version": "1.0.0",
  "description": "Boilerplate React & Webpac",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot --port 3000",
    "build": "webpack --mode production"
  },
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-moment": "^0.7.7",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "proxy": "http://localhost:4000"
}

异步组件

import React, { Component } from 'react';

const asyncComponent = importComponent => {
  return class extends Component {
    state = {
      component: null
    };

    componentDidMount() {
      importComponent().then(cmp => {
        this.setState({ component: cmp.default });
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  };
};

export default asyncComponent;

代码段

import asyncComponent from './HOC/asyncComponent';

    const asyncTest = asyncComponent(() => {
      return import('./Auth/Signup/Signup');
    });

    class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <Router>
              <div className={styles.container}>
                <Switch>
                  <Route path="/test" component={asyncTest} />
                  <Route path="/test2" component={asyncTest} />
                  <Route path="/test3" component={asyncTest} />
                  <Route path="/test4" component={asyncTest} />
                </Switch>
              </div>
            </Router>
          </Provider>
        );
      }
    }