使用Webpack和PostCSS啓用熱重新加載

當我在我的文本編輯器中保存樣式表時，我正在重新加載我的窗口。目前，我必須手動重新加載頁面才能看到任何更改。下面是我的WebPack配置文件處理處理CSS代碼片段：使用Webpack和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', 
     ], 
     }), 
    }, 
    ], 
}

我使用的WebPack 3，用提取文本插件沿的WebPack開發服務器和PostCSS。謝謝！

來源

2017-10-16 iknowhtml

要使用ExtractTextWebpackPlugin爲css啓用熱重新加載，需要遵循多個步驟。

1.配置的WebPack-DEV-服務器

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

2.添加HotModuleReplacementPlugin

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
]

3.添加一個入口點用於開發服務器

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

4.使用CSS-熱裝載機

請參考文檔，因爲第一個例子包含ExtractTextPlugin。查看它here。

5.安裝在你的.js熱模塊腳本入口點

內，您的.js文件入口點，你應該實現以下腳本：

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

這些措施應爲您提供JS和CSS的熱重新加載。如果有任何問題或疑問，請告訴我。

來源

2017-10-19 23:47:37

我按照上面的指定修改了我的Webpack配置文件，並且在文檔中指定的用於css-hot-loader的concat函數的右括號上收到一個意外的令牌錯誤。導致錯誤的特定代碼是'['css-hot-loader']。concat（..剩餘配置）''。 – iknowhtml

您無需使用ExtractTextPlugin進行應用程序開發。使用一個加載程序的CSS，並有一個單獨的配置爲webpack.prod

你包括devpack在webpack.config與模塊？

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

而且您應該使用webpack-dev-server運行您的應用程序。

來源

2017-10-17 08:23:19

我使用'ExtractTextPlugin'使樣式表從JS束中分離出來，並且我想保留它，這樣我就可以在瀏覽器中修改我的CSS。我已經在使用CSS加載器了。我沒有單獨的生產Webpack配置文件，但我認爲這對我的使用情況沒有必要。最後，'DevServer'已經在我的Webpack配置文件中。 – iknowhtml

會看到我的配置文件的其餘部分有用嗎？ – iknowhtml

使用Webpack和PostCSS啓用熱重新加載

回答

相關問題