Enable Hot Reloading With Webpack and PostCSS

Question

I am looking to hot reload my window when I save a stylesheet in my text editor. Currently, I have to manually reload the page to see any changes. Below is the snippet in my Webpack configuration file that handles processing 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',
        ],
      }),
    },
  ],
}

I am using Webpack 3, Webpack Dev Server and PostCSS along with the Extract Text Plugin. Thanks!

score 1 · Accepted Answer · answered Oct 19 '17 at 23:47

To enable hot reloading for css using the ExtractTextWebpackPlugin, there are multiple steps you need to follow.

1. Configure webpack-dev-server

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

2. Add the HotModuleReplacementPlugin

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

3. Add an entrypoint for the dev server

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

4. Use css-hot-loader

Please refer to the documentation, since the first example contains ExtractTextPlugin. View it here.

5. Setup the hot-module script in your .js entrypoint

Inside your .js entry point, you should implement the following script:

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

Those steps should provide you with hot reloading of both JS and CSS. Let me know, if there are any issues or questions.

I modified my Webpack configuration file as specified above and I receive an unexpected token error on the closing parenthesis for the concat function used for css-hot-loader as specified by documentation. The specific piece of code causing the error is `['css-hot-loader'].concat(..rest of configuration)`. — iknowhtml, Oct 21 '17 at 14:54

score 0 · Answer 2 · answered Oct 17 '17 at 08:23

0

You need not use ExtractTextPlugin for development of app. Use a loader for css and have a separate config for webpack.prod

Have you included devServer in webpack.config along with module?

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

And you should run your app with webpack-dev-server.

answered Oct 17 '17 at 08:23

Sridhar Sg

1,546
13
21

I use `ExtractTextPlugin` so the stylesheet is separated from the JS bundle, and I would like to keep it that way so I can modify my CSS in the browser. I'm already using a loader for CSS. I don't have a separate production Webpack configuration file, but I don't think it's necessary for my use case. Lastly, `DevServer` is already in my Webpack configuration file. – iknowhtml Oct 18 '17 at 21:24
Would seeing the rest of my configuration file be useful? – iknowhtml Oct 18 '17 at 21:25
@iknowhtml ExtractTextPlugin doesnt support HMR. kapish. – atilkan Jul 12 '18 at 20:15

Enable Hot Reloading With Webpack and PostCSS

2 Answers2