Question

我正在使用typescript 2.0构建angular2 app。我的应用程序运行良好，但我遇到了webpack bundle和hot reloading的问题。

要创建更新的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？

Answer 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"
},

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

1 个答案: