Búsqueda de sitios web

javascript - Webpack - recarga en caliente de módulos de TypeScript [awesome-typescript-loader]

Estoy intentando agregar recarga en caliente de módulos a mi proyecto de TypeScript. Tengo la siguiente configuración:

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

Recibo el siguiente mensaje de error en mi explorador:

OBTENER http://localhost:3000/public/bundle.js 404 (No Encontrado)

Parece que la ruta pública está mal definida. ¿Puede ayudarme a entender qué estoy haciendo mal?

Respuesta #1

Tu output.publichPath es incorrecto. Debería ser una URL: publicPath: '/public/'. No una ruta en tu sistema de archivos local.

De la documentación de webpack

El publicPath especifica la dirección URL pública de los archivos de salida cuando se referencia en un navegador. Para los loaders que incrustan etiquetas o o hacen referencia a recursos como imágenes, publicPath se utiliza como el href o url() del archivo cuando es diferente de su ubicación en el disco (como se especifica en path)

El servidor de desarrollo de Webpack generará un paquete en memoria y lo servirá desde output.publicPath

De la documentación del servidor de desarrollo de webpack

Este paquete modificado se sirve desde la memoria en la ruta relativa especificada en publicPath (ver API). No se escribirá en el directorio de salida configurado. Cuando ya existe un paquete en la misma ruta URL, el paquete en memoria tiene prioridad (por defecto).

Artículos relacionados