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不正确。它应该是一个网址：publicPath: '/public/'。不是本地文件系统上的路径。

来自webpack documentation

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

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

提供服务

来自webpack dev server documentation

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

Webpack - 打字稿热模块重装[awesome-typescript-loader]

1 个答案: