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

Question

我是一名有用的助手，可以为您翻译文本。

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

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 (未找到)

看起来公共路径定义错误了。请问您能帮我看看我哪里出错了吗？

- jezikk

---

你的/public目录下是否存在该文件？ - ppovoski

不是的，但我认为当代码发生任何更改时，webpack会自动生成bundle.js。 - jezikk

Answer 1

您的output.publicPath设置不正确。它应该是一个url：publicPath: '/public/'，而不是本地文件系统上的路径。

来自webpack文档： publicPath指定了在浏览器中引用输出文件时的公共URL地址。对于嵌入或引用像图片这样的资源的加载程序，publicPath用作href或url()指向文件的位置（当它们与磁盘上的位置不同时）。

Webpack开发服务器将生成一个内存捆绑，并从output.publicPath提供它。

来自webpack dev server文档：

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

- jontem