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

- Amay

Answer 1

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

尽管如此，有几种方法可以解决这个问题。

最明显的方法是将concat部分提取到一个单独的文件中（例如prepare.js），然后通过运行类似于以下内容的命令来启动构建过程：node prepare.js && webpack。这将首先运行prepare，如果没有错误退出，就会运行webpack。通常，这将添加到package.json的scripts部分，例如：

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

为了以更加集成 Webpack 的方式实现相同的效果，您可以将 concat 部分提取到一个单独的文件中，然后使用Webpack Shell Plugin让 Webpack 在构建开始之前执行该文件。

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

- Emil Oberg

---

谢谢你的解决方案。你确定Webpack可以处理这样的操作吗？我没有找到任何关于我的“concat”问题的解决方案，所以我正在使用外部函数。也许有一些教程可以帮助我吗？ - Amay

一切都取决于您如何构建样式表。在 Webpack 的世界中，样式通常是在 JavaScript 源文件中 require 的，然后 Webpack 会将它们捡起来，通过 scss 编译器/postcss/等工具运行，然后将最终产品输出为内联样式或一个（或多个）.css 文件。请参阅 https://www.bensmithett.com/smarter-css-builds-with-webpack/、http://survivejs.com/webpack/building-with-webpack/separating-css/ 和 https://webpack.github.io/docs/stylesheets.html。 - Emil Oberg

提醒一下，webpack-shell-plugin插件与webpack的--watch标志不兼容：https://github.com/1337programming/webpack-shell-plugin/issues/60 - Nick Settje

Answer 2

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

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

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

- Luca Fagioli