Webpack stopped watching one particular file as well as new files

Question

I've been using webpack for 2 years without issue. However, as of yesterday, I noticed that new files weren't being re-compiling when calling npm run dev. In addition, one of my files which has always recompiled (one that already existed) has stopped re-compiling.

After playing around with this for a while I'm actually seeing that some more interesting behavior

resources
 /js 
   /components
   /pages
   /store
   /router
   /plugins

All of my current files outside of the components file recompile. Every file in components recompile except for a single file (MyQuestions.vue). In addition if I add new files to that folder, they won't recompile. Further if I create a new folder, no files in the new folder will recompile (I thought maybe components was corrupted and I could just create a new folder).

In my scripts field in my package.json I see:

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "eslint --fix --ext .js,.vue resources/js"
  },

In addition, my webpack.mix.js is:

    const path = require('path')
const fs = require('fs-extra')
const mix = require('laravel-mix')
require('laravel-mix-versionhash')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

mix
  .js('resources/js/app.js', 'public/dist/js')
  .sass('resources/sass/app.scss', 'public/dist/css')
  .disableNotifications()

const ASSET_URL = process.env.ASSET_URL ? process.env.ASSET_URL + '/' : '/'
console.log('Asset URL: ' + ASSET_URL)

if (mix.inProduction()) {
  // console.log(process.env);
  mix
    // .extract() // Disabled until resolved: https://github.com/JeffreyWay/laravel-mix/issues/1889
    // .version() // Use `laravel-mix-versionhash` for the generating correct Laravel Mix manifest file.
    .versionHash()
} else {
  mix.sourceMaps()
}
const webpack = require('webpack')

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin()
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // Locales were causing a css error in app.css
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_URL)
    })
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/js')
    }
  },
  output: {
    chunkFilename: 'dist/js/[chunkhash].js',
    path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
    publicPath: ASSET_URL
  }
})

mix.then(() => {
  if (!mix.config.hmr) {
    process.nextTick(() => publishAseets())
  }
})

function publishAseets () {
  const publicDir = path.resolve(__dirname, './public')

  if (mix.inProduction()) {
    fs.removeSync(path.join(publicDir, 'dist'))
  }

  fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
  fs.removeSync(path.join(publicDir, 'build'))
}

/* mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");*/

Answer 1

I finally figured it out. The initial file that I was testing was a Vue component that I was no longer using anywhere (not imported into a different script). It seems that webpack will only recompile when a file is actually being used. Never noticed this before. I then repeated the process by creating new directories/files and sure enough, once I imported them into another script, they were compiled.