实时重新加载未通过Webpack提供的文件中的更改

Question

在出于测试目的将工作流程从gulp更改为webpack的过程中，遇到了以下我无法解决的问题。

设置

文件通过apache提供，而观看和处理更改则通过webpack进行。不能选择使用webpack-dev-server，因为我希望尽可能地接近实时环境。

目标

触发浏览器重新加载已查看和已处理的文件，而无需通过webpack提供文件。

问题

我正在尝试使webpack-livereload-plugin工作。如果我更改* .scss或* .js文件，一切都会按预期进行。但是，如果我更改* .php文件中的任何内容，则会按预期将其复制到目标位置，但不会触发重新加载（仅在第一次更改时）。我正在为此使用文件加载器。

有人知道为什么文件加载器在第一次更改后没有触发webpack-livereload-plugin吗？

文件

webpack.config.js

// webpack v4
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');


module.exports = {
  entry: { main: './app/site/patterns/assets.js' },
  output: {
    path: path.resolve(__dirname, 'dist'), // base output path
    filename: 'assets/[name].js',
  },
  watchOptions: {
    poll: 1000, // Check for changes, if running in a VM
    aggregateTimeout: 300, // wait for more changes
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'eslint-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: 'assets/',
              sourceMap: true,
            },
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/',
          },
        }],
      },
      {
        test: /\.(php)$/,
        use: [{
          loader: 'file-loader',
          options: {
            context: './app/',
            name: '[path][name].[ext]',
            emitFile: true,
          },
        }],
      },
    ],
  },
  devtool: 'source-map',
  plugins: [

    new CleanWebpackPlugin('dist/assets/', {}),
    new CleanWebpackPlugin('dist/site/', {}),

    new MiniCssExtractPlugin({
      filename: 'assets/main.css',
      sourceMap: true,
    }),

    new LiveReloadPlugin(),

  ],

};

package.json

{
  "name": "webpack-kirby",
  "version": "1.0.0",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development --watch --progress"
  },
  "dependencies": {
    "autoprefixer": "^8.6.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-md5-hash": "^0.0.6"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^4.5.2",
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^13.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.13.0",
    "file-loader": "^1.1.11",
    "raw-loader": "^0.5.1",
    "webpack-livereload-plugin": "^2.1.1"
  }
}