Question

在导入react-router-dom时，Webpack不会进行代码拆分。我正在尝试使用代码拆分和热重载来创建服务器渲染。我尝试使用以下代码示例来隔离问题。
我在做什么错了？

babel 7 webpack 4.16 节点8.11 反应16.8

 .babelrc

  {
"presets": [
    "@babel/preset-react",
    "@babel/preset-env" 
],
"plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
]
}


App.js 

import React,{Component} from 'react';
import {hydrate} from 'react-dom';

/* when adding this line all break*/ 
--->   import {Link } from 'react-router-dom'; <----

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    //console.log("constructor called SERVER/CLIENT ");
  }

   componentDidMount(){
     import(/* webpackChunkName: "test" */ 'history').then(()=>{
     console.log("Imported");
   })
    console.log("componentDidMount called CLIENT-HYDRATION")
 }

  render() {
    console.log("App render called ")
     return (
       <div>
        dd
       </div>
   )
   }
}

 hydrate(<App />, document.getElementById('root'));

Webpack

 const path = require('path');
 const webpack = require('webpack')
 const WriteFilePlugin = require('write-file-webpack-plugin')

 module.exports = {
    name: 'client',
    target: 'web',
    devtool: 'inline-source-map',
    mode: 'development',
 entry: [

   path.resolve(__dirname,'./spiltcode-code.js'),

],
output: {
   filename: '[hash].[name].js',
   chunkFilename: '[hash].[name].js',
path: path.resolve(__dirname, 'dist'),
} ,
module: {
  rules: [{
     test: /\.jsx?$/,
     exclude: /(node_modules)/,
    use: {
       loader: 'babel-loader',
    }
  }

  ]
},
plugins: [

new WriteFilePlugin(),

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('development'),
    BROWSER: true
    }
  })
]
};

我尝试了以下

1。react-router-dom的较旧版本 2.包括webpack条目和app.js上的polyfills，如babel所述

添加react-router-dom v4时Webpack 4.16不会代码拆分

0 个答案: