使用 webpack 监视目录答案

【问题标题】：Watch a directory with webpack使用 webpack 监视目录
【发布时间】：2021-06-30 04:59:04
【问题描述】：

我在我的开发环境中安装了 webpack 来捆绑我的依赖项。另外，我正在使用webpack-merge-and-include-globally插件来连接一堆js文件并包含在标记中的脚本标签中。

当我使用 --watch 标志运行 webpack 时，它会监视我的入口文件 (build/index.js) 但我也希望它监视 /build/ 目录中的所有文件以及我放置在其中的任何文件或目录- 某种“深度观察”。

如何将 webpack 设置为 --watch 一个与我的入口文件无关的任意目录？

webpack.config.js

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const merge = require('webpack-merge-and-include-globally');

module.exports = {
    entry: "./build/index.js",
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new merge({
            files: {
                "./app.js" : [
                    './build/js/app.js',
                    './build/js/controllers/*',
                ],
            },
        }),
    ],

    optimization: {
        minimize: process.env.NODE_ENV === 'production',
        minimizer: [new TerserPlugin()]
    },

    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'

}

【问题讨论】：

标签： javascript node.js npm webpack watch

【解决方案1】：

试试这个plugin:

import WatchExternalFilesPlugin from 'webpack-watch-files-plugin'

const config = {
  // ... webpack config ...
  plugins: [
    // ....
    new WatchExternalFilesPlugin({
      files: [
        './src/**/*.js',
        '!./src/*.test.js'
      ]
    })
  ]
}

【讨论】：

【解决方案2】：

将watch: true 添加到配置中。这意味着在构建后，它会在任何文件被更改（和保存）时继续构建。请注意，您仍然需要启动第一个构建

【讨论】：