Webpack监听检测到变更但不重新构建打包文件求助

咱们来一步步拆解你遇到的问题：Webpack首次构建正常，但watch模式检测到文件变更后日志显示构建完成，却没有在目标目录生成文件。结合你的Windows 7环境和Webpack 4配置，主要有几个可能的原因和对应的解决办法：

1. 硬编码路径分隔符导致的解析异常 #

Windows下的路径分隔符是\，但你在配置里直接用字符串拼接生成入口路径的方式，容易在watch模式下引发Webpack路径解析混乱：

var js_entry = `${appDir}\\${reponame}.js`;

建议用Webpack推荐的path.resolve生成标准路径，避免系统兼容性问题：

// 替换原来的js_entry定义
var js_entry = path.resolve(appDir, `${reponame}.js`);

2. Poll模式的配置问题 #

你在watchOptions里设置了poll: true，这会让Webpack用轮询方式检测文件变更。但Windows本地文件系统下，Webpack其实可以自动监听文件系统事件，强制开启poll反而可能因轮询频率问题导致文件写入延迟或失败。可以尝试：

• 先关闭poll模式：

watchOptions: {
  poll: false,
  ignored: ['node_modules']
}

• 如果确实需要poll（比如使用共享目录），可以指定具体轮询间隔，比如poll: 300（300毫秒），避免默认高频率轮询带来的问题。

3. 输出目录的权限与存在性验证 #

你的开发环境输出目录是../../../build/public/，虽然首次构建成功，但watch模式下可能因目录权限或临时文件锁定导致无法写入。可以：

• 手动确认../../../build/public/目录存在，且当前用户有写入权限；
• 虽然Webpack 4通常会自动创建输出目录，但手动创建目录能排除“目录不存在导致写入失败”的可能。

4. 环境变量的明确设置 #

你的启动命令buildDev没有明确设置NODE_ENV，虽然Webpack默认会用development模式，但为避免环境变量异常导致路径或模式错误，可在Windows启动命令里加上环境变量配置：

// 修改package.json里的buildDev命令
"buildDev": "set NODE_ENV=development && webpack -d --env.widgetsrc=devServer --config webpack.config.js --progress --colors"

修改后的关键配置示例 #

const path = require("path");
const webpack = require("webpack");
const appDir = path.resolve(__dirname, "");
const reponame = require("./package.json").name;
const devServer = require("../../../icec-lab-conf.json").server;
const customPath = "/xcc/rest/public/custom/";
var publicPath;
var buildDir;

// 明确判断生产/开发环境，避免歧义
const isProduction = process.env.NODE_ENV === 'production';
if (isProduction) {
  publicPath = customPath;
  buildDir = path.resolve(__dirname, "./dist/");
} else {
  publicPath = devServer;
  buildDir = path.resolve(__dirname, "../../../build/public/");
}

var mode = isProduction ? 'production' : 'development';
// 使用path.resolve生成标准入口路径
var js_entry = path.resolve(appDir, `${reponame}.js`);
var js_filename = mode === "production" ? `${reponame}-min.js` : `${reponame}.js`;

const config = {
  entry: js_entry,
  output: {
    filename: js_filename,
    path: buildDir,
    publicPath: publicPath
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: appDir,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [],
  watch: true,
  watchOptions: {
    poll: false, // 适配Windows本地文件系统，关闭轮询模式
    ignored: ['node_modules']
  },
  mode: mode
};

module.exports = config;

先试试这些修改，大概率能解决watch模式下文件不生成的问题。

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