sap9433 / filewatcher-webpack-plugin Goto Github PK

Hi,
I'm trying to override the default behavior of onChangeCallback in order to add some logic. But I can't access the compiler variable in order to call the compiler at the end of the function. I understand that in your example it works because you're in the plugin apply function which has it injected by default but how to access it without being in an aplpy function ?
cc @sap9433

Thanks in advance for your help
Fabien

Clean up dependencies.

Hi,

When I run webpack-dev-server it compiles fine, but when I save a file that is being watched by this plugin, I get the following error:

Compilation Started  after change of - source/app/vocabs/english.json


node_modules/filewatcher-webpack-plugin/index.js:45
              if (err) throw err;
                       ^

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.run (node_modules/webpack/lib/Compiler.js:149:37)

It may be because I'm compiling multiple JS files at a time, or it could be that I'm using Webpack v4...? Here is my Webpack config:

const webpackConfig = {
        entry: {
            'app': `./source/app/app.js`,
            'widget': `./source/widget/app.js`,
        },
        output: {
            path: path.resolve(__dirname, `${config.outputDir}/assets/`),
            publicPath: `${config.outputDir}/assets/`,
            filename: '[name].js',
            libraryTarget: `amd`,
        },
        devServer: {
            contentBase: __dirname,
            compress: true,
            port: 1031,
            disableHostCheck: true,
            host: `0.0.0.0`, // needed for hot reloading to work (binds to all hosts)
            https: {
                key: fs.readFileSync(`${pathToCerts}/device.key`),
                cert: fs.readFileSync(`${pathToCerts}/${root_domain}.crt`),
            },
            before: beforeCompile, // function defined earlier in file
            after: afterCompile, // function defined earlier in file
        },
        mode: (shell && shell.NODE_ENV) ? shell.NODE_ENV : `development`,
        module: {
            rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['env', {
                            targets: {
                                browsers: ['ie 9'],
                            },
                            useBuiltIns: true,
                            loose: true,
                        }]],
                    },
                },
            }],
        },
        externals: [
            'vocab',
            'wrapper',
        ],
        plugins: [
            new filewatcherPlugin({watchFileRegex: ['**/vocabs/*.json']}),
        ],
    };
    return webpackConfig;
};

This image makes up 73% of the total repository size. It should be compressed and the size reduced as the displayed size in the readme is small.

Hi, thanks for your plugin !

It's not a bug but I'm sure it would be helpfull to add this to your doc fo newbies like me ;)

I've setup a webpack to build my css/js files
but would like to reload my page when I change php (twig) files - witch aren't process by webpack

So i found your extention, witch seems to work since I have logs when editing my twig files

[WDS] App updated. Recompiling...
[WDS] Nothing changed.

So I've tryed to handle the file change myself

    new FileWatcherPlugin({
      watchFileRegex: ['./templates/**/*.twig'],
      onChangeCallback: (a, b)=>{
       // I see these logs
        console.log('change', a);
        console.log('change2', b);

       // I WANT TO FORCE RELOAD HERE
      }
    })

but don't know how to send the reload signal from there

Could someone help me ?

Hi there,

how I can take my own onChangeCallback Function? How I can get the compiler instance?
Thx!

The dependency on webpack-dev-server is incorrect, it should be a devDependency

fyi,

warning filewatcher-webpack-plugin > node-async-require-loader > mocha > [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
warning filewatcher-webpack-plugin > node-async-require-loader > mocha > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning filewatcher-webpack-plugin > node-async-require-loader > mocha > glob > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

Similar in request to #7 but for a different reason.

In webpack v4, a change to a new API was made, called hooks. Projects based on previous versions of webpack will now throw an exception

(node:14542) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Thanks for this project!

I don't think the option watchFileRegex has a good name, because it doesn't take regular expressions, but rather glob patterns which are very different.

It would also be nice if the documentation clarifies that whatever value you use, it's passed along to chokidar.watch. The documentation for chokidar.watch says that the value should be "Paths to files, dirs to be watched recursively, or glob patterns."

Cheers

See https://webpack.js.org/configuration/watch/#watchoptions-aggregatetimeout

Currently using a workaround specfied in #8 (comment), but having direct support for this option would be preferable.