如何在快速应用中设置webpack-hot-middleware？

Question

bounty到期在4天内。该问题的答案有资格获得+ 200声望赏金。Tanmay希望对此问题引起更多关注：“问题涵盖了几乎所有内容。但是，如果您需要了解更多信息，请随时在评论中提问。”

我正在尝试在我的Express应用中启用Webpack HMR。这不是SPA应用。对于视图方面，我正在使用EJS和Vue。我在这里没有vue-cli的优势，因此我必须为webpack中的SFC（.vue文件）手动配置vue-loader。同样值得一提的是，我的工作流程非常典型：resources目录中有主要的客户端资源（scss，js，vue等）。我希望将它们捆绑在我的public目录中。

我的webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: [
        './resources/css/app.scss',
        './resources/js/app.js',
        'webpack-hot-middleware/client'
    ],
    output: {
        path: path.resolve(__dirname, 'public/js'),
        publicPath: '/',
        filename: 'app.js',
        hotUpdateChunkFilename: "../.hot/[id].[hash].hot-update.js",
        hotUpdateMainFilename: "../.hot/[hash].hot-update.json"
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development'
                        }
                    },
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '../css/app.css'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

我的app/index.js文件：

import express from 'express';
import routes from './routes';
import path from 'path';
import webpack from 'webpack';
import devMiddleware from 'webpack-dev-middleware';
import hotMiddleware from 'webpack-hot-middleware';
const config = require('../webpack.config');
const compiler = webpack(config);

const app = express();

app.use(express.static('public'));
app.use(devMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));
app.use(hotMiddleware(compiler));

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '../resources/views'))

routes(app);

app.listen(4000);

export default app;

我的scripts文件的package.json部分：

"scripts": {
    "start": "nodemon app --exec babel-node -e js",
    "watch": "./node_modules/.bin/webpack --mode=development --watch",
    "build": "./node_modules/.bin/webpack --mode=production"
}

我正在使用nodemon重新启动服务器以获取服务器端代码的更改。在一个标签中，我保持npm run start打开，在另一个标签中，我保持npm run watch。

在我的控制台中，我看到HMR已连接：

它仅在第一次时才接受更改，并发出如下警告：

忽略对不可接受的模块./resources/css/app.scss-> 0的更新

并且不接受后续更改。我该如何解决？

Answer 1

我前段时间也遇到过类似的问题，并且能够通过在节点中组合xdotool和exec来解决。它也可能对您有帮助。

这里是摘要：

• 具有bash script to reload the browser。该脚本使用xdotool来获取Chrome窗口并重新加载（该脚本也可用于Firefox和其他浏览器）。相关的SO问题：xdotool
• 在主文件（app / index.js）中，使用How to reload Google Chrome tab from terminal?运行脚本（在app.listen回调内部）。进行任何更改后，nodemon将重新加载，导致脚本执行并重新加载浏览器。

---

Bash脚本：reload.sh

exec

---

app / index.js

exec

希望有帮助。如有任何疑问，请回复。