[英]Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working
我已經在StackOverflow和GitHub問題上經歷了很多答案,但是,我仍然陷入了Webpack中的熱模塊替換。 我正在使用npm start
運行我的服務器與webpack-dev-server --hot --inline
。 我正在嘗試更改我的React組件中的代碼,但瀏覽器中沒有任何反應 。
我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87(64位)。
在我的瀏覽器console
,我收到日志消息
[HMR]等待來自WDS的更新信號......
[WDS]啟用熱模塊更換。
但是,沒有熱/實時重載正在發生。 當我在React組件文件中更改代碼時,沒有顯示任何內容。 我正在關注本教程的第一個視頻, Egghead.io/ReactFundamentals ,其中一切正常。
以下是我的package.json和webpack.config.js文件。
的package.json
{
"name": "react-fundamentals",
"version": "1.0.0",
"description": "Fundamentals of ReactJS",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.0-rc.2",
"react-dom": "^15.0.0-rc.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
devServer: {
port: 7777
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
]
}
}
如果有人可以指導我完成這個問題,那將是很棒的,因為我無法進一步有效地完成本教程。
更新我已經在下面發布了答案。
我自己想出了解決方案。
我必須用sudo
運行我的服務器。 而不是npm start
,它必須是sudo npm start
。
希望能幫助到你!
devServer: {
inline: true, // you missed this line which will reload the browser
port : 7777
}
您的webpack配置已關閉。 看看react-transform-boilerplate是否正確設置。
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
// or devtool: 'eval' to debug issues with compiled output:
devtool: 'cheap-module-eval-source-map',
entry: [
// necessary for hot reloading with IE:
'eventsource-polyfill',
// listen to code updates emitted by hot middleware:
'webpack-hot-middleware/client',
// your code:
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}]
}
};
.babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
我使用以下版本:“webpack”:“~1.12.14”“webpack-hot-middleware”:“^ 2.10.0”“webpack-dev-middleware”:“^ 1.6.1”
我在react.js項目中的app.js中使用以下代碼。
var webpackconfig =require('./webpack.config');
var webpack = require('webpack');
var webpackMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var http = require('http');
var express = require('express');
var app = require('express')();
var isDeveloping = process.env.NODE_ENV != 'production';
// var isDeveloping = false;
console.log("IS developing ",isDeveloping);
var serverConfig = require('./globalconfig.js')
var serverPort = serverConfig.port
app.get('/css/bootstrap.min.css', function (req, res) {
res.sendFile(path.join(__dirname, 'public/lib/bootstrap/css/bootstrap.min.css'));
});
// swaggerRouter configuration
var options = {
controllers: './controllers',
useStubs: process.env.NODE_ENV === 'development' ? true : false // Conditionally turn on stubs (mock mode)
}
var config = {
appRoot: __dirname // required config
}
// Start the server
app.listen(serverPort, function () {
console.log('Your server is listening * on port %d (http://localhost:%d)', serverPort, serverPort);
});
if (isDeveloping) {
app.use('/node_modules', express.static('/node_modules'));
app.use(express.static('src/web-ui/public/'));
app.use(express.static('src/web-ui/public/'));
const compiler = webpack(webpackconfig);
const middleware = webpackMiddleware(compiler,{
publicPath: webpackconfig.output.publicPath,
headers: {
"Cache-Control" : "public, max-age=604800"
},
constentBase:'dist',
stats:{
color:true,
hash:false,
timings:true,
chunks:false,
chunkModules:false,
modules:false
}
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));
app.get('/',function response(req,res){
res.write(middleware.fileSystem.readFileSync(path.join(_dirname,'dist/index.html')));
res.end();
});
} else {
app.use('/node_modules', express.static('/node_modules'));
app.use(express.static('dist/public'));
app.use(express.static('dist'));
app.get('/', function response(req, res,next) {
console.log("Processing req");
var entryFile = path.join(__dirname, 'dist', 'index.html');
console.log("Hitting the Root",entryFile);
res.sendFile(entryFile);
});
}
相同的代碼在其他員工計算機上被熱替換,但並非總是如此,但很多時候熱替換在我的計算機中不起作用。
我剛剛刪除了node_modules
文件夾和package-lock.json
文件。 然后重新運行npm install
。 有效!
嘗試將模塊加載器更新為:
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel"],
query: {
presets: ["es2015", "react"]
}
}
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.