web-dev-qa-db-fra.com

Webpack-dev-server ne se regroupe pas même après avoir affiché un message valide de regroupement

J'ai installé une application de réaction de base avec webpack mais je n'ai pas pu obtenir le webpack-dev-server fonctionne correctement.

J'ai installé webpack-dev-server globalement et a essayé d'exécuter la commande Sudo webpack-dev-server --hot car un rechargement à chaud était requis.

Le projet semble fonctionner correctement avec juste webpack cmd. Il s'intègre dans mon dossier de compilation et je peux le faire fonctionner via un serveur mais il ne fonctionnera pas avec webpack-dev-server. Depuis le terminal, il est clair que le processus de génération s'est terminé sans qu'aucune erreur ne soit levée [webpack: bundle is now VALID.] et en fait il regarde correctement parce que sur n'importe quel changement il déclenche le processus de construction mais il n'est pas vraiment construit [il ne sert pas mon bundle.js]. J'ai essayé de changer la configuration entière et je n'ai toujours pas pu résoudre le problème.

Il serait très apprécié que quelqu'un puisse vous aider.

Voici mon fichier webpack.config.js.

var path = require('path');

module.exports = {
    devtool: '#inline-source-map"',

    watch: true,
    colors: true,
    progress: true,

    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /\.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /\.scss$/
        }]
    },

    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'),
        publicPath: '/build/',
        filename: '[name].js'
    },
    entry: {
        bundle: [
            './src/index.js'
        ]
    },

    devServer: {
        contentBase: "./",
        inline: true,
        port: 8080
    },
};
javascriptnode.jsreactjswebpackwebpack-dev-server
26
Karthik Rana

J'ai résolu le problème par moi-même. Aussi idiot que cela puisse paraître, mais le problème était avec le publicPath sous l'objet output. Il doit correspondre à la propriété path au lieu de simplement /build/, c'est à dire.,

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},
41
Karthik Rana

Dans mon cas, j'ai dû vérifier où le webpack sert le fichier.

Tu peux le voir: http://localhost:8080/webpack-dev-server

Ensuite, je pouvais voir mon chemin bundle.js> http: // localhost: 8080/dist/bundle.js

Après cela, j'ai utilisé ce /dist/bundle.js dans mon index.html <script src="/dist/bundle.js"></script>

Maintenant, il actualise toutes les modifications de fichiers.

23
Andre Evangelista

webpack-dev-server sert votre bundle.js de la mémoire. Il ne générera pas le fichier lorsque vous l'exécuterez. Donc bundle.js n'est pas présent en tant que fichier dans ce scénario.

Si vous ne souhaitez pas utiliser bundle.js, par exemple pour optimiser sa taille ou tester votre déploiement de production, générez-le avec webpack à l'aide de la commande webpack et servez-le en mode production.

11
Mark

Dev-server conserve le fichier compilé en mémoire, et je ne peux pas y accéder directement ... MAIS! LA SOLUTION est que vous n'avez pas besoin d'y accéder, en développement (même lorsque vous exécutez votre projet sur le serveur de noeud ou localhost) utilisez localhost: 8080 pour accéder à votre page, et c'est là que webpack-dev-server sert votre page et vous peut sentir tous les avantages de l'utiliser (rechargement en direct!), MAIS! il ne compile pas votre bundle.js, SO! avant la production, vous devez exécuter manuellement la commande webpack build, et c'est tout! il n'y a aucun moyen pour dev-server de compiler votre fichier bundle.js! Bonne chance!

0
Oleksandr Grin