我希望能为我的 Express 应用启用 webpack HMR，但这并不是一个SPA应用。在视图方面，我使用的是 EJS 和 Vue，因此没有 vue-cli 的优势，所以必须手动配置 webpack 中的 SFC（.vue 文件）的 vue-loader。值得一提的是，我的工作流非常典型：我把主要的客户端资源（scss、js、vue 等）放在“resources”目录下，希望将它们打包到“public”目录中。
我的“webpack.config.js”文件:
我的
我的
我的“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
并且不会捕捉到后续更改。 我该如何解决这个问题？