Webpack-dev-сервер не объединяется даже после отображения правильного сообщения пакета
Я установил базовое приложение для реагирования с помощью webpack, но я не смог правильно запустить webpack-dev-server
.
Я установил webpack-dev-server
глобально и попытался выполнить команду sudo webpack-dev-server --hot
, поскольку требовалась горячая перезагрузка.
Кажется, что проект работает нормально только с webpack
cmd. Он встроен в мою папку для сборки, и я могу заставить ее работать через какой-то сервер, но он не будет работать с webpack-dev-server
. Из терминала ясно, что процесс сборки завершен без ошибки, вызываемой [webpack: bundle is now VALID.
], и на самом деле он правильно смотрит, потому что при любом изменении он вызывает процесс сборки, но на самом деле он не создается [он не служит мой bundle.js]. Я попытался изменить всю конфигурацию и все еще не мог решить проблему.
Было бы очень полезно, если кто-то может помочь.
Ниже представлен мой файл webpack.config.js.
var path = require('path');
module.exports = {
devtool: '#inline-source-map"',
watch: true,
colors: true,
progress: true,
module: {
loaders: [{
loader: "babel",
include: [
path.resolve(__dirname, "src"),
],
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0'],
}
}, {
loader: 'style!css!sass',
include: path.join(__dirname, 'src'),
test: /\.scss$/
}]
},
plugins: [],
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/',
filename: '[name].js'
},
entry: {
bundle: [
'./src/index.js'
]
},
devServer: {
contentBase: "./",
inline: true,
port: 8080
},
};
Ответы
Ответ 1
У меня проблема решена мною. Глупо, как это звучит, но проблема была в publicPath
под объектом output
. Он должен соответствовать свойству path
вместо /build/
, то есть
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
Ответ 2
В моем случае я должен был проверить, где веб-пакет служит этому файлу.
Вы можете видеть это:
http://localhost:8080/webpack-dev-server
Тогда я мог видеть свой путь bundle.js > http://localhost:8080/dist/bundle.js
После этого я использовал /dist/bundle.js
в моем index.html <script src="/dist/bundle.js"></script>
Теперь он обновляет любые изменения файлов.
Ответ 3
webpack-dev-server обслуживает ваш пакет bundle.js из памяти. Он не будет генерировать файл при его запуске. Таким образом, bundle.js не присутствует в файле в этом сценарии.
Если вы не хотите использовать bundle.js, например, чтобы оптимизировать его размер или протестировать производственное развертывание, сгенерируйте его с помощью webpack с помощью команды webpack и подайте его в режиме производства.
Ответ 4
Dev-сервер хранит скомпилированный файл в памяти, и я не могу получить к нему прямой доступ... НО! РЕШЕНИЕ заключается в том, что вам нет необходимости обращаться к нему, в процессе разработки (даже если вы запускаете свой проект на сервере узла или локальном хосте) используйте localhost: 8080 для доступа к вашей странице, и что там, где webpack-dev-server обслуживает вашу страницу, и вы чувствую все преимущества его использования (живая перезагрузка!), НО! он не компилирует ваш bundle.js, ТАК! перед производством нужно вручную запустить команду сборки webpack, и все! dev-server не может скомпилировать ваш файл bundle.js! Удачи!