Webpack - 打字稿热模块重装[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(),
    ],
};

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

获取http:// localhost:3000/public/bundle.js 404(未找到)

似乎错误地定义了公共路径.请问你能帮我解决我做错的事吗？

Answer 1

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

来自webpack 文档

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

Webpack 开发服务器将生成一个内存包并从中提供服务output.publicPath

来自webpack 开发服务器文档

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