Webpack停止监听特定文件及新增文件问题求助

问题 #

使用Webpack已有2年，此前一直正常。但从昨天开始，执行npm run dev时新增文件不再重新编译，同时有一个原本正常编译的现有文件也停止编译。

排查后发现特殊现象：

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

• components目录外的所有现有文件均能正常重新编译；
• components目录内除MyQuestions.vue外的其他文件都能正常编译；
• components目录内新增文件无法重新编译，即使新建文件夹，其中的文件也无法编译。

相关配置 #

package.json的scripts字段：

"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"
  },

webpack.mix.js配置：

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");*/

排查与解决思路 #

1. 切换监听模式 #

尝试使用npm run watch-poll替代npm run dev，部分文件系统（如Docker挂载、NFS共享）原生监听会失效，轮询模式可绕过该问题。

2. 清除Webpack缓存 #

删除项目根目录下的node_modules/.cache文件夹，执行命令：

• Linux/macOS：rm -rf node_modules/.cache
• Windows：rd /s /q node_modules\.cache
  清除后重新启动服务。

3. 排查MyQuestions.vue的异常 #

• 检查该文件的导入关系：确认是否被app.js或其他入口文件正确引用，是否存在循环引用、语法错误导致监听中断；
• 临时重命名该文件（如MyQuestions_bak.vue），重启服务后观察components目录监听是否恢复。若恢复，说明该文件存在权限异常、内容损坏或监听缓存问题。

4. 验证文件引用关系 #

确认components目录下的新增文件是否被入口文件或已加载模块引用，Webpack仅监听能解析到的依赖文件，未被引用的新增文件不会被主动监听。

5. 检查publishAseets函数影响 #

注释掉mix.then()中的publishAseets调用逻辑，重启服务观察监听是否正常——该函数编译后删除public/build目录，可能干扰开发模式下的监听逻辑。

6. 修正文件权限 #

确保components目录及文件有可读权限，Linux/macOS下执行：

chmod -R 755 resources/js/components

7. 修复依赖问题 #

• 若近期更新过Laravel Mix或Webpack，尝试回退到之前的稳定版本：npm install laravel-mix@<原版本号>；
• 删除node_modules、package-lock.json，重新执行npm install修复依赖冲突。

内容的提问来源于stack exchange，提问作者Eric