Currently, I have webpack set up in my development environment to bundle all of my dependencies. To help concatenate various js files and include them in a script tag within the markup, I am utilizing the
webpack-merge-and-include-globallyAlthough when I run webpack with the --watch flag, it only watches my entry file (build/index.js). What I really need is for webpack to also watch every file within the /build/ directory, along with any additional files or directories I may add there - essentially, I require a "deep watch". Is there a way to configure webpack to achieve this deep watch for an arbitrary directory not connected to my entry file?
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'
}