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 = [
   (...)
] 

Gregale

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']
    })
  ],
  ...
}

Yashmak

thank you for the solution. Are you sure that Webpack can take care about operations like those? I didn't find any solution for my "concat" problem, thats why I'm using external function. Maybe some tutorial for that? – Gregale

All depends on how you go about to build your stylesheets. In a Webpack world the styles are usually required in your javascript source files and Webpack then picks them up, runs it through scss compilers/postcss/whatnot and then either outputs the finished product as inline style or a (or multiple) .css file. Take a look at bensmithett.com/smarter-css-builds-with-webpack , survivejs.com/webpack/building-with-webpack/separating-css and webpack.github.io/docs/stylesheets.html – Yashmak

Just a heads up that webpack-shell-plugin does not play along with the --watch flag for webpack: github.com/1337programming/webpack-shell-plugin/issues/60 – Mandymandych

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.");
                });
            },
        },
    ],
    //...
};

Bestial