webpack-dev-server 不刷新 bundle.js 既不看

Question

我正在使用 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;

我也分析过这个 and used the plugin提到的，但是得到错误： throw new Error('output.path is not. Define output.path.');，在config.

中定义

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

Answer 1

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

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

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

webpack-dev-server 不刷新 bundle.js 既不看

webpack-dev-server doesn't refresh bundle.js neither watch

webpack

webpack-dev-server

typescript2.0

angular