WebPack在构建开始之前执行函数

Question

我需要在Webpack开始构建过程之前执行一个JavaScript函数.该函数只接受.scss文件并将它们连接成一个.

之后,Webpack应该获取结果文件.有没有选择呢？

目前,我运行前的功能module.exports的webpack.config.js,但是似乎它的不同步操作.Module.exports在concat()函数结束之前执行,Webpack找不到.scss文件.

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

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

module.exports = [
   (...)
] 

Answer 1

您可以使用编译器挂钩在构建的任何阶段添加任何代码。

编译钩子在编译开始之前（以及每次）被调用，所以你可能想使用它：

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

Answer 2

在运行Webpack之前连接scss文件似乎有点奇怪,因为这些操作通常由Webpack本身处理.

话虽如此,有一些方法可以解决这个问题.

最明显的方法是将concat部件提取到单独的文件(例如prepare.js),然后通过沿着这条线运行一些东西来启动构建过程:node prepare.js && webpack.那将首先运行准备,如果退出没有错误webpack将运行.通常,这将被添加到scriptspackage.json 的部分,例如

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

为了实现相同的目标,但是以更多的Webpack集成方式,你可以做同样的事情,你将concat部分提取到一个单独的文件,然后让Webpack在构建开始之前,在Webpack Shell插件的帮助下执行该文件,例如

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