I have webpack installed in my development environment to bundle my dependencies. In addition, I am using the webpack-merge-and-include-globally plugin to concatenate a bunch of js files and include in a script tag in the markup.
When I run webpack with the --watch flag, it watches my entry file (build/index.js) but I would also like it to watch all the files in the /build/ directory and any files or directories I place inside it - a "deep watch" of sorts.
How can I setup webpack to --watch an arbitrary directory, not associated with 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'
}
from Watch a directory with webpack
No comments:
Post a Comment