你好，我想使用 webpack 与 express 和 webpack-dev-middleware 和热模块替换。我收到下面的消息，但无论如何浏览器都不会刷新。
我已经坚持了好几天了，所以如果有人能帮助我，那就太神奇了。我正在提供我的服务器和 webpack 配置文件。提前非常感谢你。
[HMR] 已连接
应用捆绑-26838B.js：1 [HMR] 捆绑包在 61968ms 中重建
我得到了这个，但浏览器没有刷新。
服务器.js
const config = require('./config');
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.mode);
}
const opn = require('opn');
const path = require('path')
const express = require('express');
const https = require('https');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const proxyMiddleware = require('http-proxy-middleware');
const portfinder = require('portfinder')
const fs = require('fs');
const options = {
key: fs.readFileSync('./certificates/private.key'),
cert: fs.readFileSync('./certificates/certificate.crt')
};
const webpackConfig = require('./webpack.config')
const port = process.env.PORT || 4000;
const app = express();
const compiler = webpack(webpackConfig);
const devMiddleware = webpackDevMiddleware(compiler, {});
const hotMiddleware = require('webpack-hot-middleware')(compiler);
app.use(hotMiddleware)
// Set up the proxy.
Object.keys(config.dev.proxyTable).forEach(function (context) {
app.use(proxyMiddleware(context, config.dev.proxyTable[context]));
});
app.use(require('connect-history-api-fallback')())
app.use(devMiddleware);
const uriBase = 'mydomain.local:';
var _resolve, _reject;
const readyPromise = new Promise((resolve, reject) => {
_resolve = resolve
_reject = reject
})
var server;
portfinder.basePort = port;
console.log('> Starting dev server...')
const httpsPort = 4000;
const httpsServer = https.createServer(options, app).listen(httpsPort);
devMiddleware.waitUntilValid(() => {
portfinder.getPort((err, port) => {
if (err) {
_reject(err)
}
process.env.PORT = port
const uri = 'https://' + uriBase + port;
console.log('> Listening at ' + uri + 'n');
server = app.listen(port, function () {
console.log('Development server listening on port ' + port);
});
_resolve()
})
})
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./dist'))
module.exports = {
ready: readyPromise,
close: () => {
server.close()
httpsServer.close()
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
resolve: {
alias: { 'chart': require.resolve('chart.js') }
},
entry: {
'angular': path.resolve(__dirname, './node_modules/angular/angular'),
'app': [
'webpack-hot-middleware/client?path=https://localhost:4000/__webpack_hmr&reload=true',
'./src/app/app.js',
],
'vendor': [
'webpack-hot-middleware/client?path=https://localhost:4000/__webpack_hmr',
"lodash",
"jquery",
"jquery-ui",
"angular",
"@uirouter/angularjs",
"angular-aria",
"angular-material",
"angular-route",
"angular-sanitize",
"angular-scroll",
"angular-ui-bootstrap",
"angular-ui-sortable",
"bootstrap",
"fullcalendar",
"html2canvas",
"moment",
"moment-range",
"moment-timezone",
]
},
output: {
filename: 'libs/[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: ['ng-annotate-loader', 'babel-loader']
},
{
test: /.less$/,
use: ExtractTextWebpackPlugin.extract({
use: ['css-loader', 'less-loader'],
})
},
{
test: /.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
options: {
name: './fonts/**/[name].[ext]'
}
},
{
test: /.(woff2?|eot|ttf|otf|svg|png)$/,
loader: 'file-loader',
},
{
test: /.html$/,
exclude: path.resolve(__dirname, './src/app/app.html'),
use: [
'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src/app')),
{
loader: 'html-loader',
options: {
attrs: [
'img:src',
':template-url',
],
},
},
],
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
sourceMap: false,
}),
// new CleanWebpackPlugin('dist'),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['app', 'vendor'],
filename: 'libs/[name].bundle-[hash:6].js'
}),
new HtmlWebpackPlugin({
template: './src/app/app.html'
}),
new CopyWebpackPlugin([
{ from: 'src/app/styles/img', to: 'styles/img' },
{ from: 'src/app/styles/fonts', to: 'styles/fonts' },
{ from: 'releases/templates/development', to: './' }
]),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
_: 'lodash',
moment: 'moment',
}),
new ExtractTextWebpackPlugin('styles/styles.css'),
new OptimizeCssAssetsWebpackPlugin(),
],
watchOptions: {
ignored: /node_modules/,
},
};
module.exports = config;
我实际上通过更改此行解决了这个问题
'webpack-hot-middleware/client?path=https://localhost:4000/__webpack_hmr&reload=true',
自
'webpack-hot-middleware/client?path=//localhost:4000/__webpack_hmr&reload=true',
我希望它在未来对某人有所帮助。