WebpackとPostCSSでホットリロードを有効にする

Question

テキストエディタでスタイルシートを保存すると、ウィンドウをホットリロードしたいと思っています。現在、ページを手動でリロードして変更を確認する必要があります。私は抽出テキストプラグインと一緒にWebPACKの3、WebPACKのDevのサーバーと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', 
     ], 
     }), 
    }, 
    ], 
} 

：下記の処理CSSを扱う私のWebPACKの構成ファイル内の抜粋です。ありがとう！

Answer 1

ExtractTextWebpackPluginを使用してCSSのホットリロードを有効にするには、複数の手順が必要です。

1.設定のWebPACK-devのサーバー

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

2. HotModuleReplacementPlugin

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
] 

3.のdevのサーバー

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

のためのエントリポイントを追加

4. CSS-ホットローダー

最初の例は、ExtractTextPluginが含まれているため、ドキュメントを参照してください。それを表示するhere。これらの手順は、をご提供する必要があり

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

：

5.セットアップあなたの.jsでホットモジュールスクリプトがあなたの.jsエントリポイント内部

をエントリポイントは、次のスクリプトを実装する必要がありますJSとCSSのホットリロード。 問題や疑問がある場合はお知らせください。

Answer 2

アプリの開発にはExtractTextPluginを使用する必要はありません。 cssにローダーを使用し、webpack.prodの設定を別にしてください

webpack.configにモジュールとともにdevServerを含めましたか？

,

あなたはwebpack-dev-serverでアプリを実行する必要があります。