Webpack 4 devServer HMR плюс полная перезагрузка при других изменениях файлов (например, просмотры) - PullRequest
Новая
       67

Webpack 4 devServer HMR плюс полная перезагрузка при других изменениях файлов (например, просмотры)

0 голосов
/ 14 сентября 2018

У меня есть веб-проект с рабочей конфигурацией Webpack4, использующий webpack-dev-server с включенным HMR и запущенный таким образом с помощью скрипта npm:

cross-env NODE_ENV=development webpack-dev-server --inline --hot

Все в порядке, HMR работает длямои файлы js и scss.Теперь я задаюсь вопросом, возможно ли расширить конфигурацию моего Webpack для полной перезагрузки в браузере при изменении файла шаблона представления.

Мне кажется, что webpack-dev-server не может сделать это на своемсобственный, так что я думаю, что мне нужен другой плагин.Немного погуглив, у меня получилось:

  1. webpack-dev-server + browser-sync-webpack-plugin
  2. переписать мою конфигурацию в webpack-serve как кажется это может сделать
  3. chokidar + webpack-dev-middleware (API для перезагрузки?)

Поэтому мой вопрос заключается в том, каков наилучший способ получить HMR +, отслеживать заданные пути и перезагрузить браузер при изменении файла (blade / twig / php / etc ...) с Webpack 4 (.17.2)?

Соответствующая часть моей текущей конфигурации: 

devServer: {
  index: '',
  open: true,
  hotOnly: true,
  publicPath: '/build/',
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}

1 Ответ

0 голосов
/ 24 сентября 2018

Отвечая самому себе, возможно, другие могут извлечь из этого пользу.Просто заметьте: у меня есть проект Laravel, и я использую Webpack4 для его объединения вместо собственного решения Laravel Mix.Мой тестовый сайт Laravel обслуживается nginx на mysite.test

1) webpack-dev-server + BrowserSync

Отлично работает, BrowserSync имеетмного хороших функций, мне это нравится!Единственным недостатком является то, что он создает еще один прокси поверх devserver Webpack.Вы можете попробовать его, выполнив следующие действия:

Установите browser-sync-webpack-plugin , как описано, затем: 

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

// Webpack config, plugins section
plugins: [
  new BrowserSyncPlugin({
    host: "mysite.test",
    port: 3000,
    proxy: "mysite.test:8080",
    open: "external",
    files: [
      './resources/views/**/*.blade.php'
    ]
  },{
    // prevent BrowserSync from reloading the page
    // and let Webpack Dev Server take care of this
    reload: false
  })
]

2) webpack-serve

Больше не поддерживается, поскольку webpack-contrib / webpack-serve устарело.

3) webpack-dev-server + Chokidar

Наконец я начал использовать это.Просто и быстро. Chokidar - это средство просмотра файлов, оно также используется внутренним девайсером Webpack для просмотра файлов.Возможно, он уже есть в вашем node_modules, но если нет, установите его с npm или yarn.

Вот весь мой конфиг devServer, который я изначально хотел.Внедрение CSS и изменения Javascript обрабатываются HMR, а при изменении файла представления devserver автоматически перезагружает браузер: 

const chokidar = require('chokidar');

// Webpack's devServer config
devServer: {
  before(app, server) {
    chokidar.watch([
      './resources/views/**/*.blade.php'
    ]).on('all', function() {
      server.sockWrite(server.sockets, 'content-changed');
    })
  },
  index: '',
  open: true,
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}

Протестировано в Webpack 4.19.1

...