WebPack execute function before build starts

Question

I need to execute one JavaScript function before the Webpack starts its building process. The function just takes .scss files and concatenate them into one.

After that Webpack should take the result file. Is there an option to do that?

At the moment I run the function before the module.exports in webpack.config.js, but it seems that its not synchronous operation. Module.exports execute before the concat() function ends and Webpack can't find .scss file.

function concat(opts) {
  (...)
}

concat({ src : styles,  dest : './css/style.scss' });

module.exports = [
   (...)
] 

Answer 1

It seems a little bit odd to concat scss files before running Webpack as those kind of operations are usually handled by Webpack itself.

That being said, there's a few way of solving this.

The most obvious way would be to extract the concat parts to a separate file (e.g. prepare.js) and then run start the build process by running something along this line: node prepare.js && webpack. That'll first run prepare and if that exits without error webpack will be run. Usually that'll be added to the scripts part of your package.json, e.g.

"scripts": {
  "build": "node prepare.js && webpack"
}

To achieve the same but in a more Webpack integrated way you could do the same thing where you extract the concat part to a separate file and then let Webpack execute that file, before build starts, with the help of Webpack Shell Plugin, e.g.

const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
  ...
  plugins: [
    new WebpackShellPlugin({
      onBuildStart:['node prepare.js']
    })
  ],
  ...
}

Answer 2

You can add any code at any phase of the building, using the Compiler Hooks.

The compile hook is called before (and every time) the compilation begins, so you probably want to use that:

config = {
    //...
    plugins: [
        {
            apply: (compiler) => {
                compiler.hooks.compile.tap("MyPlugin_compile", () => {
                    console.log("This code is executed before the compilation begins.");
                });
            },
        },
    ],
    //...
};