Activer le rechargement à chaud avec Webpack et PostCSS

Question

Je cherche à recharger à chaud ma fenêtre lorsque j'enregistre une feuille de style dans mon éditeur de texte. Actuellement, je dois recharger manuellement la page pour voir les changements. Ci-dessous l'extrait dans mon fichier de configuration Webpack qui gère le traitement css:

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: path.resolve(__dirname, 'node_modules'), 
     loader: 'babel-loader', 
    }, 
    { 
     test: /\.css$/, 
     include: [`${PATHS.src}`, `${PATHS.modules}/normalize.css/normalize.css`], 
     use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
      { 
      loader: 'css-loader', 
      options: { 
       modules: true, 
       localIdentName: '[name]__[local]___[hash:base64:5]', 
       importLoaders: 1, 
      }, 
      }, 
      'postcss-loader', 
     ], 
     }), 
    }, 
    ], 
} 

J'utilise Webpack 3, Webpack Dev Server et PostCSS ainsi que l'extrait de texte Plugin. Merci!

Answer 1

Pour activer le rechargement à chaud pour css à l'aide du ExtractTextWebpackPlugin, vous devez suivre plusieurs étapes.

1. Configurer webpack-dev-server

devServer: { 
    host: '0.0.0.0', 
    port: 8080, 
    hot: true 
} 

2. Ajouter le HotModuleReplacementPlugin

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
] 

3. Ajoutez un point d'entrée pour le serveur dev

entry: [ 
    'webpack-dev-server/client?http://0.0.0.0:8080', 
    // your other entry points 
] 

4. Utilisez css-hot-chargeur

S'il vous plaît se référer à la documentation, étant donné que le premier exemple contient ExtractTextPlugin. Voir here.

5. Configuration du script-module chaud dans votre .js Entrypoint

l'intérieur de votre point d'entrée .js, vous devez implémenter le script suivant:

if (module.hot) { 
    module.hot.accept(); 
} 

Ces étapes devraient vous fournir rechargement à chaud de JS et CSS. Faites-moi savoir, s'il y a des problèmes ou des questions.

Answer 2

Vous n'avez pas besoin d'utiliser ExtractTextPlugin pour le développement de l'application. Utiliser un chargeur pour css et avoir une config séparée pour webpack.prod

Avez-vous inclus devServer dans webpack.config avec le module?

devServer: { 
    hot: true, 
    contentBase: ENTRY_DIR 
    }, 

Et vous devez exécuter votre application avec webpack-dev-serveur.