关于Webpack的热加载更新无效的问题

Question

项目结构与Webpack配置

//webpack.config.js

"use strict";

const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");

const srcPath = path.resolve(__dirname, "src/render");
const outPath = path.resolve(__dirname, "dist/render");

//判断是否生产模式
const isProduction = process.env.NODE_ENV === "production";


//awesome-typescript-loader config
const awesomeTSLoaderOptions = {
    loader: "awesome-typescript-loader",
    options: {
        useBabel: true,
        babelOptions: {
            presets: ["es2015"]
        }
    }
};

module.exports = {
    context: srcPath,
    entry: {
        render: "./app.tsx",
        vendor: [
            'react',
            'react-dom',
            // 'react-redux',
            // 'react-router',
            // 'react-router-redux',
            // 'redux'
        ]
    },
    output: {
        filename: "[name].js",
        path: outPath,
        publicPath: "",
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                // loader:"ts-loader",
                use: isProduction
                    ? awesomeTSLoaderOptions
                    : [
                        "react-hot-loader",
                        awesomeTSLoaderOptions
                    ],
                exclude: /node_modules/
            }

        ]
    },
    target: 'web',
    resolve: {
        //引入模块时，会去查找这3个类型文件
        extensions: ['.tsx', '.ts', '.js']
    },
    devServer: {
        contentBase: outPath,
        publicPath:""
    },
    //sourceMap 类型
    devtool: "eval-source-map",
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new htmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html"
        })
    ]
};

//生产模式
if (isProduction) {
    module.exports.devtool = "source-map";
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        //uglifyJs压缩
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true
        })
    ]);
}

---

目录结构

|--src
    |--render
        |--index.html
        |--app.tsx
|--dist
    |--render
        |--index.html
        |--render.js
        |--vendor.js
|--node_modules
|--webpack.config.js
|--package.json

---

问题描述

执行cross-env NODE_ENV=development webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 1235 --open"后，webpack.dev.server打开站点后，修改文件，有在浏览器的Console中看到其获取接收文件变更信息，如
[WDS] App updated. Recompiling...
[WDS] App hot update...
但页面内容并没有进行热加载，请问是我的webpack设置项编写的有问题吗？

---

备注

cross-env模块为设定process.NODE_ENV为development，只是为了简化在不同平台下的设定操作。

Answer 1

提醒一下，webpack-dev-server 带 hot 参数的时候，要去掉config里面的 HotModuleReplacementPlugin
不然会内存溢出。

另外，你这个问题。看配置，是没问题的。如果不更新页面，建议你在app.jsx 里面加上如下代码：

if(module.hot){
  module.hot.accept()
}

Answer 2

将cross-env NODE_ENV=development webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 1235 --open中的--hot去除后可以刷新页面，但未进行热更新加载

Answer 3

ide的safe write勾上了？

Answer 4

更新解决方法：

今天我也同样遇到这个问题，文件修改后，浏览器控制台会出现：

[WDS] App updated. Recompiling...
[WDS] App hot update...

但是不会页面更新，试了楼上各位的各种方法都不行，后面检查了一下package.json 内的 webpack 以及 webpack-dev-server 的版本，webpack@v3.0.0是最新版，但是webpack-dev-server@v1.11.0版本很低，最新的是webpack-dev-server@v2.5.0，于是马上将其升级，然后重启：npm run dev 就好了！