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! Удачи!