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

WebPack execute function before build starts

本文关键字：执行 函数 开始 构建 WebPack      更新时间：2023-09-26

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

之后，Webpack 应该获取结果文件。有没有选择这样做？

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

function concat(opts) {
  (...)
}
concat({ src : styles,  dest : './css/style.scss' });
module.exports = [
   (...)
]

在运行 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 插件的帮助下执行该文件，例如

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

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

编译

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

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