0

Ich freue mich auf mein Fenster neu laden, wenn ich ein Stylesheet in meinem Texteditor speichern. Zurzeit muss ich die Seite manuell neu laden, um Änderungen zu sehen. Unten ist der Schnipsel in Datei meiner Webpack Konfiguration, die Verarbeitung CSS behandelt:Aktivieren Sie Hot Reloading mit Webpack und PostCSS

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

Ich bin mit Webpack 3, Webpack Dev Server und PostCSS zusammen mit dem Extrakt Text Plugin. Vielen Dank!

Antwort

0

Um das Warmladen von CSS mit ExtractTextWebpackPlugin zu ermöglichen, müssen Sie mehrere Schritte ausführen.

1. Konfigurieren webpack-dev-Server

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

2. Fügen Sie die HotModuleReplacementPlugin

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
] 

3. einen Einstiegspunkt hinzufügen für den Dev-Server

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

4. Verwenden Sie CSS-hot-loader

Bitte beachten Sie die Dokumentation, da das erste Beispiel ExtractTextPlugin enthält. Sehen Sie es an here.

5. Setup die Hot-Modul Skript in Ihrer Js Entry

In Ihrem Js Einstiegspunkt, sollten Sie das folgende Skript implementieren:

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

Diese Schritte sollen Sie bieten mit heißes Neuladen von JS und CSS. Lassen Sie mich wissen, wenn es irgendwelche Probleme oder Fragen gibt.

+0

Ich habe meine Webpack-Konfigurationsdatei wie oben beschrieben geändert und erhalte einen unerwarteten Token-Fehler in der schließenden Klammer für die concat-Funktion, die für css-hot-loader verwendet wird, wie in der Dokumentation angegeben. Der spezifische Code, der den Fehler verursacht, ist '['css-hot-loader']. Concat (.. Rest der Konfiguration)'. – iknowhtml

0

Sie müssen nicht ExtractTextPlugin für die Entwicklung von App verwenden. Verwenden Sie einen Loader für CSS und haben eine separate Konfiguration für webpack.prod

Haben Sie devServer in webpack.config zusammen mit Modul enthalten?

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

Und Sie sollten Ihre App mit webpack-dev-Server ausführen.

+0

Ich benutze 'ExtractTextPlugin', damit das Stylesheet vom JS-Bundle getrennt wird, und ich möchte es so behalten, damit ich meine CSS im Browser ändern kann. Ich benutze bereits einen Loader für CSS. Ich habe keine separate Produktions-Webpack-Konfigurationsdatei, aber ich denke nicht, dass es für meinen Anwendungsfall notwendig ist. Schließlich befindet sich 'DevServer' bereits in meiner Webpack-Konfigurationsdatei. – iknowhtml

+0

Wäre es nützlich, den Rest meiner Konfigurationsdatei zu sehen? – iknowhtml

Verwandte Themen