使用 webpack 观看目录

Question

我在开发环境中安装了 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'

}

Answer 1

尝试使用这个插件：

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

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