Changes to imported files in webpack library not output during watch

Question

I have a small JS project compiled by webpack 5.26 with the following structure:

>dist
>src
  >js
    >classes
      carousel.js
      navBar.js
    neso.src.js
  >scss

When running npm run watch, changes made in navBar.js or carousel.js are not outputted after the initial build. Changes made in files in the scss folder and neso.src.js are outputted.

Command line output on these occurances looks like this:

assets by status 72.1 KiB [cached] 1 asset
cached modules 56.1 KiB (javascript) 997 bytes (runtime) [cached] 16 modules
webpack 5.26.0 compiled successfully in 131 ms

I've tried adding the watchOptions property and changing the entry property value in my webpack.config.js. I've also tried changing the import/export declarations in neso.src.js but nothing helped and changes in classes files still aren't being output on watch. Please can you advise how to achieve this.

package.json

{
  "name": "Neso-test",
  "version": "0.0.1",
  "description": "",
  "private": true,
  "main": "dist/neso.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack",
    "build": "cross-env NODE_ENV=production webpack",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^5.1.3",
    "mini-css-extract-plugin": "^1.3.9",
    "postcss": "^8.2.8",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.26.0",
    "webpack-cli": "^4.5.0"
  }
}

webpack.config.json

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
    mode: mode,
    entry: path.resolve(__dirname, "src/js/neso-src.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "neso.js",
        library: "Neso",
        libraryTarget: "umd",
    },
    devtool: "source-map",
    devServer: {
        contentBase: "./dist"
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.(s[ac]|c)ss$/i, // This regex adds support for .scss, .sass and .css file types
                use: [
                    mode === 'development' ? "style-loader" :  MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                    "postcss-loader"
                ],
            }
        ],
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    watchOptions: {
        aggregateTimeout: 200,
        poll: 1000,
    },
}

score 0 · Answer 1 · answered Apr 07 '21 at 20:40

The code in neso-src.js had this import statement:

import NavBar from './classes/NavBar.js';

and the referenced filename was actually navBar.js.

Changing the import statement to import NavBar from './classes/navBar.js'; worked and changes in that file now trigger a recomplile. (Uppercase 'N' to lowercase 'n').

Real credit goes to this answer which pointed me in the right direction.

Changes to imported files in webpack library not output during watch

1 Answers1