webpack-dev-server not recompiling (JS files AND SCSS files)

Question

Good morning,

Rise and shine, the sun is already high in the sky and webpack is ruining my day!

I'm using webpack-dev-server (through a script in packages.json):

"scripts": {
    "dev-server": "webpack-dev-server",
 }

That I run with yarn run dev-server

What I want is the code to recompile and the browser to refresh whenever I save a file. I can live with the fact that it doesn't work with SCSS files, but recompiling "manually" on each change in my components is just physically painful. I tried a lot of solution found online (non-exhaustive list coming) before asking here, but the result is always the same:

ℹ ｢wdm｣: Compiled successfully

And nothing happens when I modify a file (JS or SCSS).

This is a simple React app, with SCSS for styling.

Here is my webpack config:

const path = require('path');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');

const mode = process.env.NODE_ENV || 'development';

module.exports = env => {  
  return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        loader: [
          mode === 'development' ? 'style-loader' : MiniCSSExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
       }
      ]
    },
    plugins: [
      new MiniCSSExtractPlugin({ filename: 'styles.css' })
    ],
    devtool: env === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      publicPath: '/dist/'
    }
  };
};

Here a list of things I tried:

• Add --output-public-path=/dist/ to the script
• Use the following content to the devServer config in webpack.config.js:

host: '0.0.0.0',
contentBase: path.join(__dirname, 'public'),
publicPath: '/dist/',
historyApiFallback: true,
compress: true,
port: 8080,
watchContentBase: true,
inline: true,
hot: true

• Use HtmlWebpackConfig with the following config:

new HtmlWebpackPlugin({
   title: 'Prognostic',
   filename: './public/dist/index.html',
   template: './public/index.html'
})

• Remove / add webpack and webpack-dev-server
• Use a global webpack-dev-server instead of the project one (npm i -g webpack-dev-server)
• Certainly more things but I don't remember... Whoops

For information, here are the version I use:

• Babel-loader@7
• react@^16.8.6,
• webpack-dev-server@^3.9.0
• webpack@^4.41.2

So, I'd like two things to happen:

1. Automatic recompile when JS file changed
2. Automatic recompile when SCSS file changed (if possible)

If you can help me do that, I'll nominate you my Santa Dev of the year (yes, you can add that to your CV)

Thank you!

PS: great laugh when Grammarly told me that my text sounds "friendly"

Answer 1

Webpack dev server adds a watcher on your files to trigger the compilation when they have been modified. Sometimes though, depending on the text editor you are using, this won't trigger at all.

I had the same problem, using sublimetext : when I saved my code the webpack dev server wouldn't rebuild.

So instead of using the default triggering mechanism, I'm using another option of webpack :

  devServer: {
    hot: true,
    watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
    },
  }

Every 300ms the server will check if files have changed and if so, rebuild.

I hope I am your Santa Dev of the year :]

Answer 2

I don't think you can do this by webpack you need to use library like react-hot-loader