【发布时间】：2020-05-15 23:19:36
【问题描述】：
我正在尝试在我的 express 应用中启用 webpack HMR。它不是一个 SPA 应用程序。对于视图方面，我使用的是 EJS 和 Vue。我这里没有 vue-cli 的优势，所以我必须手动为 webpack 中的 SFC（.vue 文件）配置 vue-loader。另外值得一提的是，我的工作流程非常典型：我的主要客户端资源（scss、js、vue 等）位于resources 目录中。我希望将它们捆绑在我的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;
我的package.json 文件的scripts 部分：
"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
并且不接受后续的更改。我该如何解决这个问题？
【问题讨论】：
-
我研究了很多次，这些都不适合我。然后我为此使用了nodemon，我不知道但希望这会有所帮助......
-
感谢您的回复。 nodemon 是否能够用已编译的资产替换静态资产？换句话说，您是否必须重新加载浏览器才能看到新的变化？我也在使用 nodemon，但仅用于检测文件更改并仅重新启动服务器。
-
是的，你应该
-
对不起，我不明白，我应该怎么做？
-
您应该重新加载浏览器以查看更改
标签： node.js express vue.js webpack webpack-hmr