Javascript 网页包-typescript热模块重新加载[awesome typescript loader]

我正在尝试将热模块重新加载添加到我的typescript项目中。我有以下设置：

package.json

"start": "webpack-dev-server"

tsconfig.js

{
    "compilerOptions": {
        "outDir": "/public/",
        "target": "es5",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

var path = require('path');
var webpack = require('webpack');

var publicFolder = path.join(__dirname, 'public');
var sourceFolder = path.join(__dirname, 'src');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index.tsx',
    ],
    output: {
        filename: 'bundle.js',
        path: publicFolder,
        publicPath: publicFolder,
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loaders: ['react-hot', 'awesome-typescript'],
                include: sourceFolder,
            },
        ],
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                include: sourceFolder,
            },
        ],
    },
    devServer: {
        colors: true,
        port: 3000,
        hot: true,
        inline: true,
        progress: true,
        historyApiFallback: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
};

webpack.config.js

{
    "compilerOptions": {
        "outDir": "/public/",
        "target": "es5",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

var path = require('path');
var webpack = require('webpack');

var publicFolder = path.join(__dirname, 'public');
var sourceFolder = path.join(__dirname, 'src');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index.tsx',
    ],
    output: {
        filename: 'bundle.js',
        path: publicFolder,
        publicPath: publicFolder,
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loaders: ['react-hot', 'awesome-typescript'],
                include: sourceFolder,
            },
        ],
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                include: sourceFolder,
            },
        ],
    },
    devServer: {
        colors: true,
        port: 3000,
        hot: true,
        inline: true,
        progress: true,
        historyApiFallback: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
};

我在浏览器中收到以下错误消息：

获取404（未找到）

---

似乎公共路径的定义是错误的。您能帮我一下我做错了什么吗？

您的

输出。publichPath

不正确。它应该是一个url:

publicPath:'/public/'

。不是本地文件系统上的路径

从

publicPath指定在浏览器中引用时输出文件的公共URL地址。对于嵌入或标记或引用图像等资产的加载程序，当文件与它们在磁盘上的位置（由路径指定）不同时，publicPath用作文件的href或url（）

Webpack dev server将生成一个内存包，并从

output.publicPath

从

这个修改过的包是从内存中以publicPath中指定的相对路径提供的（请参见API）。它不会写入您配置的输出目录。如果捆绑包已存在于同一URL路径，则内存中的捆绑包优先（默认情况下）

---

该文件是否存在于您的

/public

目录中？不存在，但我认为webpack会在代码发生任何更改时自动生成bundle.js。