Как настроить webpack dev server на обновление php файлов?

117

03 сентября 2019, 08:20

Всем доброго времени суток, недавно начал работать с webpack. Настроил его для раработы и все вроде бы хорошо, но вот мне понадобилось изменить расширение моего index.html на .php и все, изменения я могу посмотреть теперь только после сборки всего проекта.

Я посмотрел browser-sync-webpack-plugin с настройками:

new BrowserSyncPlugin(
    {
      host: 'localhost',
      port: 3000,
      proxy: 'http://project',
      files: [
        {
          match: ['./dist'],
          fn(event, file) {
            if (event === 'change') {
              const bs = require('browser-sync').get('bs-webpack-plugin');
              bs.reload();
            }
          },
        },
      ],
    },
    {
      reload: false,
    }
)

Но мой webpack выдает мне ошибку:

Cannot find module 'browser-sync'

Как я могу настроить свою конфигурацию webpack что бы работать и с html файлами и с php файлами?

Answer 1

Может кому-то будет когда-то полезно. Вопрос решен через laravel.mix Все компилируется, все релоадится, можно смотреть как через browsersync, так и через локальный сервер Мой packege.json:

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"browserslist": [
    "> 1%",
    "last 3 version"
],
"devDependencies": {
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.2.0",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.8",
    "laravel-mix": "^4.0.14",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.16.1",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.22"
},
"dependencies": {
    "bootstrap": "^4.2.1",
    "inputmask": "^4.0.6",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "swiper": "^4.4.6",
    "wowjs": "^1.1.3"
}

}

Мой webpack.mix.js:

let mix = require('laravel-mix');
mix.autoload({
  jquery: ['$', 'window.jQuery']
});
mix.setPublicPath('./')
    .sass('src/scss/main.scss', 'dist/css')
    .options({
      processCssUrls: false
    })
    .sourceMaps()
    .js('src/js/main.js', 'dist/js')
    .extract(['bootstrap', 'popper.js', 'jquery' ]);
mix.browserSync({
  proxy: '*your.project.name*'
});
if (mix.inProduction()) {
  mix.version();
}