问题描述
我正在开发一个同构React应用程序,我想通过Webpack设置HMR工具。 我尝试过wbpack-dev-server --hot或HotModuleReplacementPlugin,但是它们都不起作用...
这是webpack.config.js和package.json。
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var fs = require('fs');
let webpack = require('webpack');
var nodeModules = {};
fs.readdirsync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
var config = { // la configuration commune pour les 2 modes.
devtool: 'inline-source-map',context: path.resolve(__dirname,'app'),entry: {
'/bundle-app': ['babel-polyfill','./clientside/indexClient.js'],'/components/bundle-components': ['babel-polyfill','./components/App.js','./components/Form.js','./components/objetform/Home.js','./components/objetform/SetDB.js'],'/server/bundle-server': ['babel-polyfill','./serverside/server/createserver/app.js','./serverside/server/createserver/indexServer.js','./serverside/server/renderpage/renderFullPage.js','./serverside/server/renderpage/routerPage.js','./serverside/server/request/routerDB.js','./serverside/server/request/routerSetDB.js','./serverside/server/routes/routes.js',],'/services/bundle-services': ['./serverside/services/getMongooseData.js','./serverside/services/setMongooseData.js','./serverside/services/models/Employe.js'],'/assets/stylesheets/style': './assets/stylesheets/style.css',},target:'node',output:
{
path: path.resolve(__dirname,'build'),// path.resolve(__dirname,// on crée l'application de sortie dans un dossier "public"
filename: '[name].js',// les fichier bundle seront dans le chemin qui est le nom des fichiers d'entrées
},module:
{
rules: [
{
test: /\.(js|jsx)$/,// pour les fichiers de type js et jsx
loader: 'babel-loader',// on charge babel un transcompileur
exclude: /node_modules/,options:
{
presets: ['@babel/preset-env','@babel/preset-react']
}
},{
test:/\.css$/,use:[
{
loader: MiniCssExtractPlugin.loader,options:
{
publicPath: '../../../build'
},{loader: 'css-loader'},]
}
]
},plugins: [
//new CleanWebpackPlugin(),new MiniCssExtractPlugin({
filename: '[name].css',chunkFilename: '[id].css'
}),new webpack.HotModuleReplacementPlugin(),};
module.exports = (env,argv) =>
{
if (argv.mode === 'development') // la configuration en plus en mode dévelopement
{
devtool = 'eval'
config.devServer = { // mise en place pour le serveur test
contentBase: path.resolve(__dirname,inline: true,hot: true,}
}
if (argv.mode === 'production') // la configuration en plus en mode production
{
devtool = 'source-map'
}
return config;
}
{
"name": "ssr-react-router-mongoose-isomorphic-app","version": "1.0.0","description": "isomorpic app","private": true,"scripts": {
"build:server": "babel ./app/server -d build/server","build:watch:server": "babel ./app/server -d build/server --watch","build:client": "webpack --mode development --config webpack.config.js/ --progress ","build:watch:client": "webpack-dev-server --config ./webpack.config.js --hot","build:prod": "npm run build:server && npm run build:client","start": "npm run build:prod && NODE_ENV=production node ./build/server/bundle-server.js","start:dev": "parallelshell \"npm run build:watch:client\" \"nodemon ./build/server/bundle-server.js\" ","start:dev:client": "webpack-dev-server"
},"author": "Rando Mathias","license": "ISC","dependencies": {
"babel-polyfill": "^6.26.0","cors": "^2.8.5","express": "^4.17.1","mongoose": "^5.10.6","react": "^16.4.0","react-dom": "^16.4.0","react-router-dom": "^5.2.0"
},"devDependencies": {
"@babel/cli": "^7.11.6","@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","babel-loader": "^8.1.0","clean-webpack-plugin": "^3.0.0","css-loader": "^5.0.0","file-loader": "^6.1.0","mini-css-extract-plugin": "^1.2.1","nodemon": "^2.0.4","parallelshell": "^3.0.2","resolve-url-loader": "^3.1.2","style-loader": "^2.0.0","webpack": "^4.44.2","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
}
}
有关信息,在热重载之前,我使用了 npm 命令: npm run build:client 然后 npm run start:dev 。 另外,当我保存我的代码时,powershell确实会响应,但不会编译新代码或刷新浏览器。它确实在powershell中打印了以下内容:
!wdm」:哈希:09c22a67c879a7645c8e版本:webpack 4.44.2时间: 1716ms建立在:2020-11-03 9:28:33 资产规模块
块名 /assets/stylesheets/style.911d579609fd270f8926.hot-update.js 1.86 KiB / assets / stylesheets / style,/ assets / stylesheets / style [emitted] [immutable] [hmr] / assets / stylesheets / style, /资产/样式表/样式 /assets/stylesheets/style.css 3.18 KiB / assets / stylesheets / style [emited] / assets / stylesheets / style /assets/stylesheets/style.js 102 KiB / assets / stylesheets / style [散发] / assets / stylesheets / style /bundle-app.911d579609fd270f8926.hot-update.js 11.9 KiB / bundle-app,/ bundle-app [已发出] [不可变] [hmr] / bundle-app,/ bundle-app /bundle-app.js 3.02 MiB / bundle-app [已发布] / bundle-app /components/bundle-components.911d579609fd270f8926.hot-update.js
11.9 KiB / components / bundle-components,/ components / bundle-components [发射] [不可变] [hmr] / components / bundle-components, / components / bundle-components /components/bundle-components.js 3.02 MiB / components / bundle-components [已发布] / components / bundle-components /server/bundle-server.911d579609fd270f8926.hot-update.js 11.9 KiB / server / bundle-server,/ server / bundle-server [发射] [不可变] [hmr] / server / bundle-server, /服务器/捆绑服务器 /server/bundle-server.js 13.3 MiB / server / bundle-server [已发出] / server / bundle-server /services/bundle-services.js 8.37 MiB / services / bundle-services [已发布] / services / bundle-services 911d579609fd270f8926.hot-update.json 152个字节
[发射] [不可变] [hmr]入口点/ bundle-app = /bundle-app.js /bundle-app.911d579609fd270f8926.hot-update.js /bundle-app.911d579609fd270f8926.hot-update.js入口点 / components / bundle-components = /components/bundle-components.js /components/bundle-components.911d579609fd270f8926.hot-update.js /components/bundle-components.911d579609fd270f8926.hot-update.js 入口点/ server / bundle-server = /server/bundle-server.js /server/bundle-server.911d579609fd270f8926.hot-update.js /server/bundle-server.911d579609fd270f8926.hot-update.js入口点 / services / bundle-services = /services/bundle-services.js入口点 / assets / stylesheets / style = /assets/stylesheets/style.css /assets/stylesheets/style.js /assets/stylesheets/style.911d579609fd270f8926.hot-update.js /assets/stylesheets/style.911d579609fd270f8926.hot-update.js [./components/objetform/Home.js] 6.33 KiB {/ bundle-app} {/ components / bundle-components} {/ server / bundle-server} [内置] + 971个隐藏模块
谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)