Webpack 4.16添加react路由器dom v4时不进行代码拆分
导入dom时,Webpack未进行代码拆分。我正在尝试创建带有代码拆分和热重新加载的服务器渲染。 我试图用以下代码示例来隔离问题。Webpack 4.16添加react路由器dom v4时不进行代码拆分,webpack,react-router,code-splitting,Webpack,React Router,Code Splitting,导入dom时,Webpack未进行代码拆分。我正在尝试创建带有代码拆分和热重新加载的服务器渲染。 我试图用以下代码示例来隔离问题。 我做错了什么 巴别塔7 网页4.16 节点8.11 反应16.8 .babelrc { "presets": [ "@babel/preset-react", "@babel/preset-env" ], "plugins": [ "@babel/plugin-syntax-dynamic-import", "@babel/
我做错了什么 巴别塔7 网页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'));
我尝试了以下方法
1.2旧版本的react路由器dom
2.包括网页条目和app.js上的polyfills,
如巴别塔所述
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
}
})
]
};