Webpack-dev-сервер компілює файли, але не оновлює або робить скомпільований javascript доступним для браузера


82

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

У моєму package.jsonвластивості сценарію встановлено значення:

"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 запускається, перевірка модуля завантажувача працює (тобто, коли я зберігаю будь-який файл .vue, веб-пакет перекомпілюється), але:

  • Браузер ніколи не оновлюється
  • Складений 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" (конфігурація веб-пакета), не встановлюйте параметр "publicPath" для свого сервера розробників
Алан,

Дякуємо, що згадали параметр "publicPath". Це мені справді допомогло!
Бенні Нойгебауер,

3
Хлопці веб-пакету повинні мати вашу на зарплаті! Це, безумовно, найкраща документація щодо налаштування сервера, яку я бачив навіть рік потому.
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' + '/' (хост вашого веб-пакету-розробника + 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-сервер із firebase-serve через проксі. Коли я застосовую цю пропозицію, моя проблема була вирішена. Тож спасибі.
Арда Заман

4

У мене була та сама проблема, і я виявив, що на додаток до всіх цих пунктів, ми також повинні помістити index.html разом з вихідним bundle.js в ту саму папку і встановити для contentBase цю папку, або кореневу, або підпапку .


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]']
  },

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
Влад Ісайкін

0

Моя справа полягала в тому, що я так глибоко заглибився в експерименти з функціями Webpack, але зовсім забув, що весь час, як так, встановлював false як ...

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

Увімкнення цього було моїм квитком.


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без будь-яких додаткових прапорів, і будь-які зміни до моїх файлів миттєво відображатимуться в браузері.


0

Я додаю свою власну казку про --watchгоре Webpack до стіни страждань тут.

Я бігав

webpack --watch

для того, щоб побудувати проект Typescript. Скомпільовані .jsфайли оновлюватимуться, однак пакет, який бачив браузер, ні. Тож я в основному знаходився в тій же позиції, що і ОП.

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


0

Дерево вашого проекту не чітке, однак проблема може бути в налаштуваннях contentBase. Спробуйте встановити contentBase: __dirname

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.