javascript - 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

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

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

最明显的方法是将 concat 部分提取到一个单独的文件(例如 prepare.js)，然后通过运行一些东西来开始构建过程行:node prepare.js && webpack。这将首先运行 prepare，如果没有错误退出，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']
    })
  ],
  ...
}