0

Обновить текущие проблемы:WebPack-DEV-сервер не работает

, кажется, что WebPack горячий погрузчик идет не так, потому что, когда я запускаю следующий ЦМД: Webpack, он может быть построен как usual.but, когда я run "" dev ":" webpack-dev-server --color --hot --progress & & node ./server.js"".webpack не может создать для меня встроенные файлы.

мой webpack.config выглядит следующим образом:

module.exports = { 
    entry: getEntries(), 

..... 

function getEntries(){ 
var routeDir = path.join(SRC_DIR,"javascripts","routes"); 
var routeNames = routeDir?fs.readdirSync(routeDir):[]; 

var nameMaps = {}; 
routeNames.forEach(function(routeName){ 
    var filename = routeName.match(/(.+)\.js$/)[1]; 
    console.log("filename in entry ",filename); 
    if(filename){ 
     var devEntryPath = [ 
      'webpack-dev-server/client?http://127.0.0.1:3001', // WebpackDevServer host and port 
      'webpack/hot/only-dev-server', 
      path.join(routeDir,filename) 
     ]; 
     nameMaps[filename] = devEntryPath; 

    } 
}); 
return nameMaps; 
} 

server.js

var server = new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(3001,'localhost',function(err,result){ 
    if(err) console.log(err); 
    console.log("webpack listening at port 3001"); 
}); 
var app = express(); 


app.get("/monitor/index",function(req,res){ 
    res.sendFile(__dirname+"/src/views/"+"page1.html"); 
}); 
app.get("/monitor/category/*",function(req,res){ 
    res.sendFile(__dirname+"/src/views/"+"page2.html"); 
}); 

app.use(express.static(__dirname)) 
     .listen(9090, 'localhost', function (err, result) { 
       if (err) console.log(err); 
       console.log('Listening at localhost:9090'); 
}); 
+0

выглядит как проблема, когда ваши изменения кода не отражаются правильно - вы попробовали обновление полной страницы? Что происходит, когда вы добавляете новый jsx, это отражается в инспекторе элементов? И какая версия реакции вы используете? – Marty

+0

У вас есть настройка компилятора sass в рамках вашего проекта? Вы не можете просто включить файл .scss, ожидающий ответа, чтобы скомпилировать его для вас! – James111

+0

@James, я использую Webpack и добавить погрузчики { \t \t \t \t тест:/\ $/СКС, \t \t \t \t погрузчики.: [ 'Стиль', 'CSS', 'дерзость'], \t \t \t \t // загрузчик: «style! Css! Sass» \t \t \t}, и запустить webpack в терминале – lizlalala

ответ

0

наконец, я нашел, где проблема, и знать отношения между WebPack-DEV -сервер и мой экспресс-сервер.

при использовании hot-loader с webpack-dev-сервером: step1: webpack создает входной файл в publicPath (который обозначен в «output» файла webpack.config.js). step2, сервер узла отправит html на передний план и выполнит поиск соответствующих активов (например, js, img и т. Д.), Но где? мы можем изменить сценарий (связанный с html) на webpack-dev-сервер (только сгенерированный с помощью шага 1), поэтому узел-сервер попросит webpack-dev-server получить справку. подвести итог, я модифицирован 3 место:

  • publicPath из webpackDevServer
  • выходного WebPack (publicPath), равного выше
  • пути сценария в HTML.

это все. И теперь мой проект может работать как ожидалось.

Смежные вопросы