web-dev-qa-db-fra.com

Le serveur de développement Webpack ne se recharge pas automatiquement

J'ai donc configuré webpack et webpack-dev-server, mais webpack-dev-server ne se recharge pas automatiquement. Si je modifie un fichier et l'enregistre, il n'y a pas de changement dans le navigateur avant l'actualisation manuelle.

Voici ma config webpack et mon fichier de script qui exécute webpack-dev-server. Est-ce que quelqu'un voit quelque chose qui pourrait empêcher le rechargement automatique de fonctionner?

Je les ai réunis en lisant plusieurs tutoriels, la documentation, et en lisant les fichiers générés par react-create-app.

config/webpack.config.dev.js 

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

const extractSass = new ExtractTextPlugin('style.css');

module.exports = {
    entry : './src/index.jsx',
    eslint: {configFile: './src/.eslintrc.json'},
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                include: ['src'],
                loader: 'babel',
                test  : /(\.js|\.jsx)$/
            },
            {
                exclude: /node_modules/,
                include: ['src']
                loader : extractSass.extract([ 'css', 'postcss', 'sass' ]),
                test   : /\.scss$/
            }
        ],
        preLoaders: [
            {
                exclude: /node_modules/,
                loader : 'eslint',
                query  : {presets: [ 'react', 'latest' ]},
                test   : /(\.js|\.jsx)$/
            }
        ]
    },
    output: {
        filename  : 'bundle.js',
        path      : 'dist',
        publicPath: '/'
    },
    plugins: [
        extractSass,
        new HtmlWebpackPlugin({
            inject  : true,
            template: paths.appHtml
        }),
        new webpack.HotModuleReplacementPlugin({multistep: true})
    ],
    postcss: () => [
        autoprefixer({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9'
            ]
        })
    ]
};

scripts/dev.js

exécuté avec $ yarn run dev

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    clientLogLevel    : 'warn',
    compress          : true,
    contentBase       : 'public',
    filename          : config.output.filename,
    historyApiFallback: true,
    hot               : true,
    inline            : true,
    lazy              : false,
    noInfo            : true,
    publicPath        : '/',
    quiet             : true,
    stats             : 'errors-only',
    watchOptions      : {
        aggregateTimeout: 300,
        poll            : 1000
    }
});

server.listen(8080, 'localhost', () => {
    console.log('Listening on port 8080');
});
javascriptwebpackwebpack-dev-server
5
Hal Carleton

Selon la documentation du serveur de développement webpack , vous devez ajouter ce point d'entrée à la configuration de Webpack pour prendre en charge l'actualisation automatique.

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
4
jontem

jontem a souligné dans sa réponse qu'il manquait un client webpack-dev-server dans ma configuration.

Voici les étapes que j'ai suivies pour appliquer sa solution et également configurer HMR.

config/webpack.config.dev.js

module.config = {
  // ...
  entry: [
    // converted entry to an array
    // to allow me to unshift the client later
    path.resolve(__dirname, '../src/index.jsx')
  ],
  // ...
  module: {
    loaders: {
      // ...
      {
        // Use style loader instead of ExtractTextPlugin
        // To allow for style injection / hot reloading css
        exclude: /node_modules/,
        loaders: [ 'style', 'css', 'postcss', 'sass' ],
        test   : /\.scss$/
      },
      // ...
    }
  }
}

scripts/dev.js

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

// unshift `webpack-dev-server` client
// and hot dev-server
config.entry.unshift('webpack-dev-server/client?/', 'webpack/hot/dev-server');

const compiler = webpack(config);

// ...
3
Hal Carleton

J'ai eu le même problème et la configuration suivante activée statique et le rechargement automatique du paquet en mémoire. La clé consiste à activer devServer.watchContentBase .

config/webpack.config.dev.js

...
module.exports = {
    ...
    devServer: {
        contentBase: ...,
        publicPath: ...,
        watchContentBase: true
    },
    ...
}

package.json

{
    ...
    "scripts": {
        "develop": "webpack-dev-server --open --mode development --config config/webpack.config.dev.js",
        ...
    }
    ...
}
1
Daniel

S'il vous plaît ajouter ce qui suit dans votre config webpack et essayez.

devServer: {
        hot: true,
        inline: true,
        Host: "localhost",
        port: 8082,
        watchOptions: {
            poll: true
        }
    }

note : J'utilisais la version de webpack ^ 3.11.0

0
Ninjaneer