使用 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

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

Answer 2

尝试使用这个 plugin:

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

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

使用 webpack 观看目录

Watch a directory with webpack

javascript

watch

node.js

npm

webpack