webpack 热更新配置 问题

Question

配置webpack热更新，服务端已启动，改变代码不能热更新

webpack.config.js配置

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    // webpack 打包的一种模式
    devtool: 'inline-source-map',
    // fs.readdirSync(__dirname) === 得到一个当前文件目录下的所有文件名称 的数组对象。
    // dirname === 当前模块的文件夹名称
    entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
        // entries ===》
        // 当前的 要处理的这个文件目录
        const fullDir = path.join(__dirname, dir)
        // 入口文件
        const entry = path.join(fullDir, 'index.js')
        // fs.statSync(fullDir).isDirectory() ===> 检测是否存在当前这个目录
        // fs.existsSync(entry) ===> 检测是否存在当前要处理的这个文件
        if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
            entries[dir] = ['webpack-hot-middleware/client', entry]
            // entries[dir] = entry
        }
        
        return entries
    }, {}),

    // 出口文件
    output: {
        path: path.join(__dirname, 'dist'),
        // 文件的名称
        filename: '[name].js',
        // 服务端 静态资源路径
        publicPath: '/dist/'
    },

    // 处理不同文件类型的模块
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ]
            },
            {
                test: /\.(css|less)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    // 插件，用于增强 webpack 的额外功能
    plugins: [
        // 用于将公共的 类库 提取出来
        new webpack.optimize.CommonsChunkPlugin({
            name: 'shared',
            filename: 'shared.js'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new UglifyJSPlugin({
            sourceMap: true
        })
    ],
}

server.js

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const WebpackConfig = require('./webpack.config')

const app = express()
const compiler = webpack(WebpackConfig)

app.use(webpackDevMiddleware(compiler, {
    publicPath: WebpackConfig.output.publicPath
}))

app.use(webpackHotMiddleware(compiler))

app.use(express.static(__dirname))

const port = process.env.PORT || 8085
module.exports = app.listen(port, () => {
    console.log(`http://localhost:${port}`)
})

浏览器提示信息

大佬们指点下，跪谢！

Answer 1

根据报错提示说检测到更新需要刷新但是刷新不了，所以 webpackdevserver 是配好了但是浏览器刷新不了是因为 webpackDev 没跟浏览器建立 socket 通信，所有 entry 后面要加上端口号，因为可能是你改了服务的默认端口号，所有 socket.js 没加载进客户端来

entries[dir] = ['webpack-hot-middleware/client', entry]
// 增加你本地 webpackDevServer 的端口号例如 8080
entries[dir] = ['webpack-hot-middleware/client?0.0.0.0:8080', entry]

Answer 2

楼主需要在入口中添加'webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false'，并且插件中得添加 new webpack.HotModuleReplacementPlugin()，具体的可以看下我写的搭建服务器教程，不过我是用koa，不过写法类似