CODEWITHSUNDEEP
webpackwebpack-dev-server
MarkHughes88
MarkHughes88

Reputation: 669

Webpack dev server not reloading on save

I'm trying to set up a project but I cant seem to get webpack to refresh when a save is made to the project.

It doesn't seem to recompile bundle.js at all and i have re-run the script in order to see track any changes at the moment.

Below is my webpack config and the scripts section of my package.json file.

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports =  {
    entry: "./src/index.js",
    mode: "none",
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test:/\.(s*)css$/,
                use:[
                    'style-loader?sourceMap',
                    'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=images/[name].[ext]',
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/templates/index.html"
        })
    ]
};

scripts running from package.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },

Upvotes: 6

Views: 7832

Answers (2)

Yash Rahurikar
Yash Rahurikar

Reputation: 196

I do not know if this might help but if you are working on VS Code there is this max limit to watch files that you need to adjust a bit. You can read more about it here https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

this sometimes causes issues with watching changes and recompiling

I hope it helps...

Upvotes: 0

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

install webpack-cli to enable HMR(Hot Module Replacement) in your app.

then add --hot in your dev script:

"dev": "webpack-dev-server --config ./webpack.config.js --hot"

Upvotes: 3

Related Questions