WebPack 在构建开始前执行函数

Question

我需要在 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 = [
   (...)
]

Answer 1

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

也就是说，有几种方法可以解决这个问题。

最明显的方法是将 concat 部分提取到单独的文件（例如 prepare.js），然后运行通过运行ning 开始构建过程沿着这条线的东西：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 在构建开始前执行函数

WebPack execute function before build starts

javascript

synchronization

build-process

build

webpack