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

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

话虽如此，有几种解决方法。

最明显的方法是将concat部分提取到单独的文件（例如prepare.js），然后通过沿此行运行某些内容来运行构建过程：node prepare.js && webpack。那将首先运行准备，如果退出没有错误webpack将运行。通常会将其添加到package.json的scripts部分，例如

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

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

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

Answer 2

您可以使用 Compiler Hooks 在建筑物的任何阶段添加任何代码。

在编译开始之前（以及每次）调用 compile 钩子，因此您可能想要使用它：

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

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

2 个答案: