Webpack-dev-server компилирует файлы, но не обновляет и не делает скомпилированный javascript доступным для браузера.

82

Я пытаюсь использовать webpack-dev-server для компиляции файлов и запуска веб-сервера dev.

В моем package.jsonслучае свойство script установлено на:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

Таким образом, --hotи --inlineследует включить веб-сервер и горячую перезагрузку (насколько я понимаю).

В своем webpack.config.jsфайле я установил параметры ввода, вывода и devServer, а также добавил загрузчик для поиска изменений в .vueфайлах:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Итак, с этой настройкой я бегу npm run dev. Запускается webpack-dev-server, работает тест загрузчика модуля (т.е. когда я сохраняю любой файл .vue, он вызывает перекомпиляцию webpack), но:

  • Браузер никогда не обновляется
  • Скомпилированный javascript, который сохраняется в памяти, никогда не становится доступным для браузера.

На этом втором маркере я вижу это, потому что в окне браузера заполнители vue никогда не заменяются, и если я открываю консоль javascript, экземпляр Vue никогда не создается и не становится доступным глобально.

Gif выпуска

Что мне не хватает?

Крис Шмитц
источник
Я думаю, что ваш веб-пакет не работает должным образом, в консоли вашего браузера отсутствует bundle.js. После этого вы должны четко ознакомиться с документами по замене горячего модуля webpack.github.io/docs/… , предлагаю вам сначала начать с режима CLI
mygoare
6
Я прочитал документацию, когда создавал ее, и лично я нахожу объяснение немного запутанным. Также, когда я прошел через пример, который они приводят в новом проекте, он не работает. Тем не менее, я провел некоторое тестирование изоляции компонентов и выяснил, что было с конфигурацией. Я собираюсь напечатать развернутый ответ сегодня за обедом.
Крис Шмитц

Ответы:

66

Здесь у меня возникли две проблемы:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

Вот исправленное webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};
Крис Шмитц
источник
8
Параметр «publicPath» - самая запутанная часть для сервера разработки. Эмпирические правила: если вы не установили "publicPath" в блоке "output" (конфигурация webpack), не устанавливайте параметр "publicPath" для вашего сервера разработки
Алан
Благодарим за упоминание опции "publicPath". Это мне очень помогло!
Бенни Нойгебауэр
3
Ребята из webpack должны иметь вас в своей зарплате! Это, безусловно, лучшая документация по настройке сервера, которую я видел даже год спустя.
Ernie S
1
Если это не работает для вас, см. Также: github.com/webpack/webpack-dev-server/issues/… и github.com/webpack/webpack-dev-server/issues/… .
Yngvar Kristiansen
medium.com/code-oil/… это помогло мне понять, почему он не работает. В моем случае у меня для publicPath было установлено значение '/', тогда как должно было быть '/ js-lib /', и по этой причине он никогда не выбирал изменения файлов, потому что я обслуживал статические файлы в js-lib, а не в памяти. файл в 'http: localhost: 9001' + '/' (ваш хост webpack-dev-server + publicPath)
Herz3h
20

После долгих поисков я нашел решение своей проблемы, в моем случае путь вывода был настроен неправильно.

Эта конфигурация решила мою проблему:

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....
Сердар Дегирменчи
источник
8
Добавление свойства publicPath исправило это для меня
Borjante
13

правильное решение

Скажите, dev-serverчтобы посмотреть файлы, обслуживаемые параметром devServer.watchContentBase .

По умолчанию он отключен.

Если этот параметр включен, изменение файла вызывает полную перезагрузку страницы .

Пример:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};
Шакиба Мошири
источник
2
Я пробовал часами, ваше предложение, наконец, работает. Уважаемые разработчики! Собственно HMR сработала для моего проекта. Но я связал webpack-dev-server с firebase-serve через прокси. Когда я применил это предложение, моя проблема была решена. Тогда спасибо.
Arda Zaman
4

У меня была такая же проблема, и я обнаружил, что в дополнение ко всем этим пунктам мы также должны поместить index.html вместе с выходным файлом bundle.js в ту же папку и установить contentBase в эту папку, либо в корень, либо во вложенную папку. .

Bing
источник
4

Каким-то образом в моем случае удаление "--hot" заставляет его работать. Итак, я удалилhot: true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },
Polv
источник
3

Это может произойти из-за ExtractTextPlugin . Отключите ExtractTextPlugin в режиме разработки. Используйте его только для производственной сборки.

Сердар Дегирменчи
источник
Это была моя проблема. По-видимому, в документации ExtraTextPlugin указано, что он не поддерживает горячую перезагрузку. Вы можете попробовать это: stackoverflow.com/a/49932664/1319182
user1319182
1

Это случилось и со мной после запуска двух разных приложений на одном webpack-dev-serverпорте друг за другом. Это произошло, несмотря на то, что другой проект был закрыт. Когда я перешел на неиспользуемый порт, он сразу заработал.

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

Если вы используете Chrome, как я, просто откройте Developer Toolsи нажмите Clear site data. Вы также можете узнать, не в этом ли проблема, запустив сайт в режиме инкогнито.

введите описание изображения здесь

Огглас
источник
Это случилось и со мной, за исключением того, что мне пришлось перезапустить Chrome.
Андреа Росалес
Помогла перезагрузка Chrome
Влад Исайкин
0

В моем случае я так глубоко погрузился в эксперименты с функциями Webpack, но совершенно забыл, что я установил inject как ложное все время, вот так ...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

Включение этого было моим билетом.

Klewis
источник
0

У меня была аналогичная ситуация, когда webpack-dev-serverмой index.htmlфайл обслуживался, но не обновлялся. Прочитав несколько сообщений, я понял, что webpack-dev-serverне создает новый файл js, а вместо этого вставляет его в index.html.

Я добавил в html-webpack-pluginсвое приложение со следующей конфигурацией в своем webpack.config.jsфайле:

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

Затем я закомментировал тег скрипта, ссылающийся на мой входной js-файл в index.html. Теперь я могу работать webpack-dev-serverбез каких-либо дополнительных флагов, и любые изменения в моих файлах мгновенно отображаются в браузере.

nflauria
источник
0

Я добавлю здесь свой особый рассказ о --watchгоре Webpack к стене страданий.

я бегал

webpack --watch

для создания проекта Typescript. Скомпилированные .jsфайлы обновятся, но пакет, который просматривал браузер, не обновится. Так что я был в основном в том же положении, что и ОП.

Моя проблема сводилась к watchOptions.ignoredпараметру. Первоначальный автор конфигурации сборки настроил ignoredфункцию фильтра, которая, как оказалось, не является допустимым значением для этого параметра. Замена функции фильтра на соответствующую RegExpзаставила --watchсборку снова работать для меня.

тел
источник
0

Дерево вашего проекта нечеткое, однако проблема может быть в настройке contentBase. Попробуйте установить contentBase: __dirname

Ойбек Абдуллаев
источник