如何使用Webpack自动刷新浏览器？

Question

我有一个名为backend-dev.js的文件，其中大部分是webpack配置。我使用它来运行我的express服务器从打包文件中。它会保持开启并在任何更改时重新启动服务器。是否可以添加任何可能的配置以在更改代码时自动刷新浏览器呢？这是我在backend-dev.js文件中拥有的内容：

const path = require('path');
const webpack = require('webpack');
const spawn = require('child_process').spawn;
const HtmlWebpackPlugin = require('html-webpack-plugin');

const compiler = webpack({
    // add your webpack configuration here
    entry: './app.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env', 'es2015', 'stage-2']
            }
          }
        }
      ]
    },
    /*plugins: [
      new HtmlWebpackPlugin({
            title: 'Project Demo',
            hash: true,
            template: './views/index.ejs' // Load a custom template (ejs by default see the FAQ for details)
      })
    ],*/
    node: {
        __dirname: false
    },
    target: 'node'
});

const watchConfig = {
    // compiler watch configuration
    // see https://webpack.js.org/configuration/watch/
    aggregateTimeout: 300,
    poll: 1000
};

let serverControl;

compiler.watch(watchConfig, (err, stats) => {
    if (err) {
        console.error(err.stack || err);
        if (err.details) {
            console.error(err.details);
        }
        return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
        info.errors.forEach(message => console.log(message));
        return;
    }

    if (stats.hasWarnings()) {
        info.warnings.forEach(message => console.log(message));
    }

    if (serverControl) {
        serverControl.kill();
    }

    // change filename to the relative path to the bundle created by webpack, if necessary(choose what to run)
    serverControl = spawn('node', [path.resolve(__dirname, 'dist/bundle.js')]);

    serverControl.stdout.on('data', data => console.log(data.toString()));
    serverControl.stderr.on('data', data => console.error(data.toString()));
});

- ShocKwav3_

---

使用webpack-hot-middleware来支持热重载模块。 - Rei Dien

Answer 1

很好的问题：我用以下方法解决了：

express有两个可以安装的模块，可以在不刷新浏览器的情况下进行热更新，并且它会自动刷新：我留下我的配置。

npm i livereload

npm i connect-livereload

const livereload = require('livereload');

const connectLivereload = require('connect-livereload');

const liveReloadServer = livereload.createServer();

liveReloadServer.watch(path.join(__dirname, '..', 'dist', 'frontend'));

const app = express();

app.use(connectLivereload());

请注意，您要监视的文件夹位于dist/frontend中。更改要监视的文件夹以使其正常工作：我正在使用NODEMON来监视后端。

livereload为浏览器在后端打开一个端口以公开更改：连接是如何发生的？很容易；使用“connect-livereload”的express，并注入一个监视该端口的脚本：如果发生更改，则通过express通知浏览器，并且浏览器将为您刷新。

我将信息保持简单以进行测试，并且不建议像这样使用它：要使用它，您必须分离开发和生产环境。我让它保持简单，以便易于理解。

这里是我找到的最相关链接：希望它也有所帮助。

https://bytearcher.com/articles/refresh-changes-browser-express-livereload-nodemon/

- Daniel