Dev сервер не перегружается, не в состоянии собрать
Я работаю над приложением реагирования / редукса, которое обслуживается локально с помощью сервера npi-piped hapi.js для порта:3000 и сервера webpack-dev-server, работающего на порту:3001;
У меня есть пара API-маршрутов для обслуживания статических файлов, а затем я удаляю файлы ресурсов из моего каталога build/public с помощью правила {param*}. Чтобы это работало, у меня есть прокси на WebpackDevServer, который перенаправляет запросы обратно на порт:3000
я имею CSSModules выполняя сборку. scss и есть пара других загрузчиков на месте.
Когда я впервые это настроил, все заработало как положено. Я мог бы добавить файлы, сохранить контент, выполнить сборку, и HMR сделает свое дело, и обновит dom. Работал отлично. В какой-то момент это перестало работать очень хорошо. Бэкэнд на:3000 выполняет перестройку и перезагрузку, в то время как интерфейс на: 3001 получает ошибку примерно так:
[HMR] Checking for updates on the server...
bundle.js:26 GET http://localhost:3001/dist/ee2fe9b049ee40ff922c.hot-update.json 404 (Not Found)hotDownloadManifest @ bundle.js:26hotCheck @ bundle.js:245check @ bundle.js:8080(anonymous function) @ bundle.js:8138
bundle.js:8095 [HMR] Cannot find update. Need to do a full reload!
bundle.js:8096 [HMR] (Probably because of restarting the webpack-dev-server)
Я заметил, что там есть ссылка на:8080 (по умолчанию webpack-dev-server), но все мои ссылки на:3000/1.
Когда этот стек работал хорошо - я мог сохранить server.js, и сервер hapi перезапустился сам (из-за трубопровода npm), и сборка веб-пакета прошла бы так, как ожидалось. В настоящее время сборка периодически прерывается из server.js, и я должен вручную $ webpack и перезагрузите браузер для запуска сборки и успешного обновления. Что, очевидно, побеждает суть.
Важные биты:
server.js
// ... hapi.js settings
// Dev server / HMR
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../webpack.config.js');
if (!isProduction){
new WebpackDevServer(webpack(config), {
publicPath: 'dist',
hot: true,
historyApiFallback: true,
proxy: {
"*": 'http://localhost:3000'
},
quiet: false,
stats: { colors: true }
}).listen(3001, 'localhost', (err, result) => {
if (err){
console.log(err);
}
console.log('WebpackDevServer[localhost::3001]');
});
}
webpack.config.js
// imports
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const validate = require('webpack-validator');
const path = require('path');
// paths
const rootPath = path.resolve(__dirname, 'client', 'src');
// configger the almighty webpack
const config = {
entry: [
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
path.resolve(rootPath, 'index.jsx')
],
resolve: {
extensions: ['', '.js', '.jsx'],
root: rootPath
},
output: {
path: path.resolve(__dirname, 'public', 'dist'),
publicPath: '/dist/',
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'react-hot!babel',
include: rootPath
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'),
include: rootPath
}, {
test: /\.(png|jpg|gif)$/,
loader: 'file?name=/images/[name].[ext]',
include: rootPath
}
]
},
devtool: '#source-map',
devServer: {
contentBase: '/public',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles.css')
]
};
module.exports = validate(config);
Работал со всеми настройками, так что я мог изобрести то, что работало. Но, похоже, все должно работать так, как ожидалось.
Любое понимание этого стека конфигурации будет оценено. Источник проекта: github
Лучший -
1 ответ
Welp. Немного ковыряюсь, если у кого-то еще есть эта проблема.
Я изменил код server.js для обработки всех конфигураций сервера dev, что теперь означает, что если я просматриваю сайт по адресу :3001Сэйвы выполняют восстановление в памяти, и те подаются на лету. И это хорошо.
Насколько я понимаю, приведенная ниже конфигурация WebpackDevServer не будет на самом деле перестраивать новые файлы (как видно из документации). Я все еще должен $ webpack вручную, чтобы фактически собрать файлы. Я сомневаюсь, что это правильное поведение, но если я получаю живую перезагрузку, то это довольно хорошо. Я просто должен остаться на :3001,
server.js
// Dev server / HMR
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../webpack.config.js');
const compiler = webpack(config);
new WebpackDevServer(compiler, {
port: 3001,
publicPath: '/dist/',
contentBase: 'dist/',
historyApiFallback: true,
inline: true,
hot: false,
quiet: false,
stats: { colors: true },
proxy: {
'*': 'http://localhost:3000'
}
}).listen(3001, 'localhost', (err, result) => {
if (err){
console.log(err);
}
console.log('WebpackDevServer[localhost::3001]');
});
webpack.config.js
// imports
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const validate = require('webpack-validator');
const path = require('path');
// paths
const rootPath = path.resolve(__dirname, 'client', 'src');
// configger the almighty webpack
const config = {
entry: [
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
path.resolve(rootPath, 'index.jsx')
],
resolve: {
extensions: ['', '.js', '.jsx'],
root: rootPath
},
output: {
path: path.resolve(__dirname, 'public', 'dist'),
publicPath: '/dist/',
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'react-hot!babel',
include: rootPath
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'),
include: rootPath
}, {
test: /\.(png|jpg|gif)$/,
loader: 'file?name=/images/[name].[ext]',
include: rootPath
}
]
},
devtool: '#source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles.css')
]
};
module.exports = validate(config);
Кажется, ваша проблема связана с HMR, каким-то образом сервер разработчика webpack получает "сигнал" об изменении файла, но затем не может определить, какую часть кода обновить, поэтому он перезагружает всю страницу.
Я использую конфигурацию, немного отличающуюся от той, которую используете вы, но на первый взгляд есть некоторые шансы:
в объекте разрешения у вас есть '' (пустая строка) в массиве распознанных расширений. Это добровольно? скажите, почему вы поместили эту пустую строку, я никогда ее не видел, мне любопытно:)
Ссылка 8080, вероятно, является номером строки, а не портом! По крайней мере, так кажется, если посмотреть на следующие упоминания в именах файлов js.
Попробуйте заменить * в конфигурации прокси-сервера webpack другим регулярным выражением... Это просто идея. Сервер разработчика Webpack должен теоретически сказать: эй! Этот URL-адрес должен быть перенаправлен на серверную часть. В то время как другие URL-адреса не должны. Я не знаю, как сервер интерпретирует регулярное выражение, возможно, звездочка, как правило, слишком сильная и заставляет конфигурацию работать неправильно.
hot должно быть установлено в true, если вы хотите HMR.
В моей настройке вместо использования локального хоста я настроил vhost на apache и в файле hosts. Не уверен, что локальный хост может привести к проблемам, но я старался как можно больше следовать тому, что я видел в документации.
Не считайте мой ответ на 100% правильным, я тоже новичок в webpack, и у меня тоже есть некоторые проблемы (только что загрузил вопрос пару часов назад). В любом случае я надеюсь, что это может быть полезно.
Скажите, пожалуйста, почему вы определили первые две точки входа? Я уже видел это спасибо