BrowserSync重新加载整个页面而不是注入CSS

Question

我正在开发一个具有CSS样式表的WordPress插件。我决定从Gulp迁移到Webpack，因为我打算在未来开始使用React.js进行开发，并认为习惯Webpack是一件好事。

所以我正在成功处理，最小化和提取我的.scss文件。与我的.js文件相同。问题是我试图在.php文件更改时使用BrowserSync重新加载页面，并在每次Webpack构建新的dist / * .css文件时注入我的css更改，但每次有css时BrowserSync都重新加载整个页面更改。奇怪的是它在完成重新加载之前注入了更改。我已经尝试过观看.css文件并在更改时执行bs.reload（{stream：true}），但它仍然可以完全重新加载。

有谁知道会发生什么？我怀疑是BrowserSync配置问题，因为它在完成重新加载之前有效地注入了更改，但我无法弄清楚导致问题的设置。

这是webpack.config.js：

const path              = require('path');
const UglifyJS          = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass       = new ExtractTextPlugin({
  filename: "../dist/[name].min.css"
});
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'custom.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJS({sourceMap: true}),
    extractSass,
    new BrowserSyncPlugin({
      host: 'localhost',
      port: '3000',
      proxy: 'http://domain.localdev',
      open: false,
      files: [{
        match: ['**/*.php'],
        fn: function(event, file) {
          if (event === "change") {
            const bs = require('browser-sync').get('bs-webpack-plugin');
            bs.reload();
          }
        }
      },
      {
        match: ['dist/*.css', 'dist/*.js'],
        fn: function(event, file) {
          if (event === "change") {
            const bs = require('browser-sync').get('bs-webpack-plugin');
            bs.stream();
          }
        }
      }],
      injectChanges: true,
      notify: true
    })
  ],
  externals: {
    jquery: "jQuery"
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env'],
            sourceMap: true
          }
        }
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader",
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }],
          fallback: "style-loader"
        })
      },
      {
        test: /\.css$/,
        loader: 'style-loader',
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          minimize: true
        }
      }
    ]
  }
}

Answer 1

好的，这是......快？我再次检查了browser-sync-webpack-plugin文档，在页面底部我发现你可以将一个选项对象传递给插件设置reload：false。通过这样做，页面将不会在构建过程完成时重新加载，但它将注入更改。通过在初始化BrowserSyncPlugin对象时将['**/*.php']匹配保留在“files”选项中，页面将在php更改时重新加载。

所以我按照我的意愿让它工作。对我而言！

Answer 2

我遇到了同样的问题，我发现你应该检测到函数内部的文件被更改，并且bs-webpack-plugin没有将JavaScript注入到仅浏览器的CSS样式表中，如下面的代码所示。

new BrowserSyncPlugin({
   host: HOST,
   open: false,
   files: [
     {
       match: ['dist/*.css', 'dist/*.js', '**/*.php'],
       fn: (event, file) => {
         if (event == 'change') {
           const bs = require("browser-sync").get("bs-webpack-plugin");
           if (file.split('.').pop()=='js' || file.split('.').pop()=='php' ) {
             bs.reload();
           } else {
             bs.reload("*.css");
           }
         }
       }
     }
   ]
 },
 {
   reload: false,
   name: 'bs-webpack-plugin'
 }
)