无法让webpack-dev-server代理和监视一起工作

Question

我正在尝试将webpack和PHP结合起来工作。

代理到PHP内置Web服务器可以正常运行，但是无法监视index.php和其他PHP文件的更改。监视js文件的功能正常。

Package.json

"devDependencies": {
    "webpack": "^2.1.0-beta.21",
    "webpack-dev-server": "^1.15.0"
  },
"scripts": {
    "backend": "cd src && php -S localhost:9000",
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
    "start": "start npm run backend && start npm run server"
  }

webpack.config.js

devServer: {
    proxy: {
        '/': {
            target: {
                host: "localhost",
                port: 9000,
                protocol: "http"
            }
        }
    },
},
watch: true,

没有代理时，监视和实时重新加载（在index.html文件上）是正确的。

我该如何告诉webpack-dev-server明确监视php文件？

也许我用于获取PHP代理的方式是错误的或过于复杂？我想听听其他解决方案。

谢谢

- Doc999tor

Answer 1

我曾经遇到过同样的问题，那真是让人痛苦:D

我建议您使用BrowserSync插件。安装browsersync，然后再安装browser-sync-webpack-plugin，接下来您只需要在webpack开发配置中require或import browser-sync-webpack-plugin，最后一步是将其作为插件添加到webpack配置文件中...

    new BrowserSyncPlugin({
      proxy: 'http://mylocalpage.loc/',
      tunnel: true,
      files: ['resources/', 'public/index.php']
    })

了解更多信息，请访问BrowserSync和BrowserSyncWebpackPlugin。

此外，我有一个用于开发的webpack.config.js和一个用于生产的webpack.config.prod.js，因此webpack-dev-server使用默认的webpack.config。在我的情况下，/resources文件夹包含所有的.js和.sass文件。

- Žarko Selak