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

Question

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

所以我正在成功处理、最小化和提取我的 .scss 文件。与我的 .js 文件相同。问题是我正在尝试使用 BrowserSync 在 .php 文件更改时重新加载页面，并在每次 Webpack 构建新的 dist/*.css 文件时注入我的 css 更改，但 BrowserSync 每次有 css 时都会重新加载整个页面改变。奇怪的是，它在完全重新加载之前注入了更改。我已经尝试查看 .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

我遇到了同样的问题，我发现您应该检测函数内部更改了哪个文件，并且 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'
 }
)

Answer 2

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

所以我让它按我想要的方式工作。对我好！