Добрый день
Делаю пример по
книгам Максима Пацианского. Отличные статьи про Redux и React. Рекомендую
Но сейчас не про это.
В самом начале мы выбираем технику - сервером служит express.js а webpack работает с hmr
Конфиги такие:
webpack.config.jsvar path = require('path');
var webpack = require('webpack');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
module.exports = {
watch: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin()
],
module: { //Обновлено
preLoaders: [ //добавили ESlint в preloaders
{
test: /\.js$/,
loaders: ['eslint'],
include: [
path.resolve(__dirname, "src"),
],
}
],
loaders: [ //добавили babel-loader
{
loaders: ['react-hot', 'babel-loader'],
include: path.resolve(__dirname, "src"),
test: /\.js$/,
plugins: ['transform-runtime'],
}
]
}
}
и
server.jsvar webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')
var app = new (require('express'))()
var port = 3000
var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))
app.get("/", function(req, res) {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, function(error) {
if (error) {
console.error(error)
} else {
console.info("==> Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
}
});
Это работает при первом запуске. webpack генерирует секунд за 15 все что нужно а потом все начинает работать непойми как:
То он ребилдит при изменениях файлов, то нет. В терминале тоже ничего не происходит, как и в коносли браузера
Порой изменения подхватываются, порой нет.
Закономерности выявить не смог, каждый раз чтобы посмотреть изменения приходится перезапускать весь сервер и ждать 15-20 секунда на ребилд.
Если eslint находит ошибку то ребилдов вообще не происходит, сразу надо перезапускать сервер.
Это ужасно мешает.
UPD
Попробовал запускать и так
webpack-dev-server --progress --inline --hot
и так
webpack-dev-server --progress --inline --hot --watch
и так
webpack-dev-server --progress --inline --watch
То исправно ребилдит, то молчит