Webpack - typescript 热模块重新加载 [awesome-typescript-loader]

Question

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

package.json

"start": "webpack-dev-server"

tsconfig.js

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

webpack.config.js

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(),
    ],
};

我在资源管理器中收到以下错误消息：

GET http://localhost:3000/public/bundle.js 404 (Not Found)

似乎 public 路径定义错误。你能帮我看看我做错了什么吗？

Answer 1

您的 output.publichPath 不正确。它应该是 url: publicPath: '/public/'。不是您本地文件系统上的路径。

来自webpack documentation

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed or tags or reference assets like images, publicPath is used as the href or url() to the file when it's different than their location on disk (as specified by path)

Webpack 开发服务器将生成内存包并从 output.publicPath

提供服务

来自webpack dev server documentation

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same URL path, the bundle in memory takes precedence (by default).

Webpack - typescript 热模块重新加载 [awesome-typescript-loader]

Webpack - typescript hot module reloading [awesome-typescript-loader]

javascript

typescript

webpack-dev-server

webpack-hmr