Задать вопрос
skoder
@skoder
web программист

Почему webpack не пересобирает проект после изменения файлов?

Добрый день
Делаю пример по книгам Максима Пацианского. Отличные статьи про Redux и React. Рекомендую
Но сейчас не про это.
В самом начале мы выбираем технику - сервером служит express.js а webpack работает с hmr
Конфиги такие:
webpack.config.js
var 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.js
var 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
То исправно ребилдит, то молчит
  • Вопрос задан
  • 3413 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
skoder
@skoder Автор вопроса
web программист
Если кто-то столкнулся c подобным поведением, то я нашел причину.
Дело не в webpack и не его настройках. Дело было в редакторе phpstorm
Пока еще не определил что в нем надо настроить, но если редактировать файлы через notepad++ то изменения подхватываются сразу же

UPD
Собственно вот решение
ctrl+alt+s
e0c6a24c400b4467afa668a379ce0ff2.jpg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы