时间戳

首页 > 解决方案 > webpack --watch 不忽略文件

webpack - webpack --watch 不忽略文件

问题描述

主要问题是，当 watch 检测到源文件中的更改并重新编译时，它会陷入循环，因为它已经更新了index.php我将编译后的 javascript 插入元素的页面（通过 HtmlWebpackPlugin）。我尝试忽略 index.php 文件所在目录中的所有内容（在watchOptions我的配置文件中）build_app，以及显式忽略该文件，但它似乎仍然卡在这个重建循环中，因为它检测到该文件中的更改.

我尝试使用似乎对某些人有所帮助的TimeFixPlugin，并且我正在使用在另一个 StackOverflow 问题中创建的WatchRunPlugin来调试检测到哪些文件已更改为webpack --watch，但它似乎没有帮助。

当 --watch 检测到我的第一个更改的文件时输出（请注意，当编译完成时，它会在index.php通过 HtmlWebpackPlugin 将新的 .js 脚本添加到索引页面时检测到另一个更改：

====================================
NEW BUILD FILES CHANGED: 
  /Users/blah/project1/src/common/services/AuthService/AuthService.class.js
====================================

Compilation  starting…


Compilation  finished

Hash: b90fb62dff8c1a7732e0
Version: webpack 4.42.0
Time: 375ms
Built at: 03/26/2020 1:47:11 PM
                                             Asset      Size  Chunks                         Chunk Names
assets/js/app.b90fb62dff8c1a7732e0.js   736 KiB     app  [emitted] [immutable]  app
                                         index.php  76.6 KiB          [emitted]              
 + 1 hidden asset
Entrypoint app = assets/js/vendors.6828eff62e21c38585ce.js assets/js/app.b90fb62dff8c1a7732e0.js
[./src/common/services/AuthService/AuthService.class.js] 9.76 KiB {app} [built]
    + 36 hidden modules
Child html-webpack-plugin for "index.php":
     1 asset
    Entrypoint undefined = index.php
    [./node_modules/html-webpack-plugin/lib/loader.js!./build_app/index.php] 77.9 KiB {1} [built]
        + 3 hidden modules
====================================
NEW BUILD FILES CHANGED: 
  /Users/blah/project1/build_app/index.php
====================================

webpack.config.js（位于/Users/blah/project1，与我运行 webpack 命令的目录相同）：

mode: 'development',
plugins: [
    new TimeFixPlugin(),
    new WatchRunPlugin(),

    // Clean build_app folder
    new CleanWebpackPlugin(['build_app_webpack'], {
        // Write logs to console.
        verbose: true,

        // perform clean just before files are emitted to the output dir
        // Default: false
        beforeEmit: true
    }),

    // Create our index.php file
    new HtmlWebpackPlugin({
        template: './build_app/index.php',
        filename: 'index.php',
        inject: 'head',          // place scripts in head because we bootstrap the app at the end of the body
        hash: true,                  // cache busting helper
        templateParameters: {
            LR_VERSION: gitRevisionPlugin.version(),
            LR_HASH: gitRevisionPlugin.commithash()
        }
    }),

    // Expose _ (underscoreJS) to the global JavaScript scope
    new webpack.ProvidePlugin({
        _: 'underscore'
    })
],
watchOptions: {
    ignored: [
        'bin_*/**',
        'build_*/**',
        'build_app/index.php',
        'karma/html-output/**',
        'jest/coverage/**',
        'jest/test-results/**',
        'node_modules/**',
        'vendor/**'
    ]
}

提前感谢您的任何指导。

标签： webpackwebpack-4

解决方案

所以，这部分是由于我目前正在 Grunt 和 Webpack 之间转换，所以我必须HtmlWebpackPlugin查看模板并将结果index.php文件输出到同一个目录中（恰好与我的 webpack 是同一个目录output.path在配置中）。此外，我还没有意识到这一点，但这也导致新编译的脚本被添加到 index.php 页面而不删除以前的脚本。

仍然不确定为什么它没有忽略我明确告诉它忽略的文件，但我通过更改我的旧 Grunt 配置以将索引文件构建到一个build_app_tmp目录而不是最终build_app目录（即 webpack 输出目录）来解决这个问题，然后我配置HtmlWebpackPlugin为使用build_app_tmp目录查找模板。

这也让我可以查看目录以了解 Grunt 可能对文件所做build_app_tmp的任何更改。index.php

推荐阅读