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

Я пытаюсь использовать webpack-dev-сервер для компиляции файлов и запуска веб-сервера 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-сервер, работает тест загрузчика модуля (т.е. Когда я сохраняю любой файл .vue, он вызывает перекомпиляцию webpack), но:

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

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

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

Ответ 1

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

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

Ответ 2

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

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

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....

Ответ 3

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

Ответ 4

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

Ответ 5

Это также случилось со мной после запуска двух разных приложений на одном и том же 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. Вы также можете увидеть, если это проблема, запустив сайт в режиме инкогнито.

Ответ 6

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

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

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

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

Пример:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

Ответ 7

Каким-то образом, для моего случая, удаление "--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]']
  },

Ответ 8

Мой случай заключался в том, что я так глубоко поэкспериментировал с функциями Webpack, но совершенно забыл, что я всегда вводил false как "...

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

Это был мой билет.

Ответ 9

Я столкнулся с подобной ситуацией, когда 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
    })
  ]

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

Ответ 10

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

я бегал

webpack --watch

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

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

Ответ 11

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