webpack-dev-server 不刷新 bundle.js 也不看答案

【问题标题】：webpack-dev-server doesn't refresh bundle.js neither watchwebpack-dev-server 不刷新 bundle.js 也不看
【发布时间】：2017-04-03 08:40:50
【问题描述】：

我正在使用 typescript 2.0 构建 angular2 应用程序。我的应用程序运行良好，但我遇到了 webpack 包和热重载的问题。

要创建更新后的 bundle.js 并为新创建的 bundle.js 运行 server，我必须分别执行 2 个命令。

webpack 和 webpack-dev-server

我只想使用 1 个命令，即 npm-start 并通过使用 watch 来重新加载服务器以更改任何文件（html or js）

为此，我在package.json 中包含了如下脚本：

  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },

但它不会刷新我的bundle.js。

下面是我的webpack.config.js：

var path = require("path");

var APP_DIR = path.resolve(__dirname, "app");
var config = {
    entry: path.resolve(APP_DIR + "/main.ts"),
    output: {
        path: APP_DIR,
        publicPath: APP_DIR,
        filename: "bundle.js"
    },
    watch: true,
    resolve: {
        extensions: ['', '.webpack.js', ".web.js", ".ts", ".js", ".jsx"]
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: "node_modules"
            }
        ]
    }
}
module.exports = config;

我也分析了这个question of SO 并使用了提到的plugin，但得到了错误： throw new Error('output.path is not. Define output.path.');，在config中定义。

有人能找出问题所在吗？而且是否可以刷新bundle.js并在没有plugin的情况下使用单个命令观看？

【问题讨论】：

将-w（或--watch）添加到webpack-dev-server 的命令行，让它监视变化（并在发生变化时重建其内存中的bundle.js 版本）。
我也试过了，确实编译bundle.js成功，webpack: Compiling... Hash: ab2ebe01ab340bbc5483 Version: webpack 1.14.0 Time: 6973ms Asset Size Chunks Chunk Names bundle.js 4.21 MB 0 [emitted] main chunk {0} bundle.js (main) 4.09 MB [rendered] [23] ./app/app.module.ts 2.31 kB {0} [built] [58] ./app/app.component.ts 2.71 kB {0} [built] + 365 hidden modules webpack: Compiled successfully.但是网页没有刷新。我必须再次执行webpack，才能刷新。
我假设您将浏览器指向webpack-dev-server 提供的HTTP 服务器？当您进行任何更改时，您的浏览器是否在控制台上显示任何内容？
是的，我指的是同一个 HTTP 服务器，甚至是每次代码更改的浏览器控制台日志更新，但只是 UI doesn't refresh。还尝试清除cache。

标签： angular webpack webpack-dev-server typescript2.0

【解决方案1】：

webpack-dev-server 不会将任何文件写入磁盘，并且它可以在没有文件存在的情况下工作，因为它会在路径被命中时从内存中提供它。如果您在没有先构建它的情况下对其进行测试（通过运行webpack），它应该仍然可以工作，如果没有，则说明您没有找到正确的路径并从文件系统中获取包。

这是因为您已将output.publicPath 设置为app 目录的绝对路径。这意味着bundle.js 只会在您请求/full/path/to/app/bundle.js 时提供。您真正想要的是在/app/bundle.js 上提供的捆绑包。为此，您可以将公共路径更改为/app/。

output: {
    path: APP_DIR,
    publicPath: "/app/",
    filename: "bundle.js"
},

【讨论】：