Javascript 在生成Web包后运行命令

我想在

--watch

模式下运行webpack，并在每次构建之后运行shell命令，将文件夹同步到另一个文件夹

---

我发现它在每次构建之后都会触发一个事件。这是可行的，但最后一个难题是从Javascript触发一个shell命令（用于同步）。任何关于如何实现这一点的提示都非常感谢。

您可以使用内置模块轻松运行任何shell命令。您还可以尝试node.js的一些shell库，如。它包装了大多数默认shell，以便更方便地使用

我也需要这样的东西，所以我编译了一个超级简单的插件，在每次构建之前和之后执行shell命令

'use strict';

var exec = require('child_process').exec;

function puts(error, stdout, stderr) {
    console.log(stdout);
}

function WebpackShellPlugin(options) {
  var defaultOptions = {
    onBuildStart: [],
    onBuildEnd: []
  };

  this.options = Object.assign(defaultOptions, options);
}

WebpackShellPlugin.prototype.apply = function(compiler) {
  const options = this.options;

  compiler.plugin("compilation", compilation => {
    if(options.onBuildStart.length){
        console.log("Executing pre-build scripts");
        options.onBuildStart.forEach(script => exec(script, puts));
    }
  });

  compiler.plugin("emit", (compilation, callback) => {
    if(options.onBuildEnd.length){
        console.log("Executing post-build scripts");
        options.onBuildEnd.forEach(script => exec(script, puts));
    }
    callback();
  });
};

module.exports = WebpackShellPlugin;

然后在您的网页包配置中：

plugins: [
    new WebpackShellPlugin({ 
         onBuildStart: ['echo "hello world"'], 
         onBuildEnd: ['echo "goodbye world"'] 
    })
]

这是超基本的，不支持异步脚本。但它是有效的。您可以随意修改您认为合适的内容

考虑MIT许可下的代码

需要运行Node4.x和更高版本，因为我在这里使用了一些es6功能

---

如果您想在特定文件发生更改时执行此操作，可以使用我构建的这个小插件：

希望对您有所帮助

Webpack4 截至今天（2018年4月11日），我尝试使用的大多数插件都使用了不推荐使用的API，因此出现了以下警告：

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

我很高兴地发现，您可以轻松地编写一个特别的网页包插件（）

在

webpack.config.js

文件中：

const exec = require('child_process').exec;

module.exports = {

  // ... other config here ...

  plugins: [

    // ... other plugins here ...

    {
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
          exec('<path to your post-build script here>', (err, stdout, stderr) => {
            if (stdout) process.stdout.write(stdout);
            if (stderr) process.stderr.write(stderr);
          });
        });
      }
    }
  ]
};

使用

如何使用：

const WebpackShellPlugin = require('webpack-shell-plugin');


    module.exports = {
      ...
      ...
      plugins: [
        new WebpackShellPlugin({onBuildStart:['echo "Webpack Start"'], onBuildEnd:['echo "Webpack End"']})
      ],
      ...
    }

---

基本上，您可以在整个编译的各个阶段连接到编译器中，然后根据需要运行自己的脚本或代码

我喜欢这样做-

class CustomPlugin {
  constructor(name, command, stage = 'afterEmit') {
    this.name = name;
    this.command = command;
    this.stage = stage;
  }

  static execHandler(err, stdout, stderr) {
    if (stdout) process.stdout.write(stdout);
    if (stderr) process.stderr.write(stderr);
  }

  apply(compiler) {
    compiler.hooks[this.stage].tap(this.name, () => {
      exec(this.command, CustomPlugin.execHandler);
    });
  }
}

然后像这样使用它

new CustomPlugin('RunTest', 'jest', 'beforeRun'),

webpack外壳插件下一步

plugin 接下来是

webpackshell插件

插件：

• GitHub:
  • 请看这一节
• npm:

使用插件 完成后的

操作

：

onAfterDone

：完成后执行的脚本的配置对象

可用于实现所需的手表相关行为（此外，请参见下面的重要注意事项）：

我想在

--watch

模式下运行webpack，并在每次构建之后运行shell命令，将文件夹同步到另一个文件夹

重要注意事项：完成后的

插件API也将适用于（影响）正常构建模式（即
webpack
命令，不带
--watch
选项）

以下是对相关GitHub问题的附加参考：

例子
我刚刚尝试过使用这个插件：它工作得很好

devDependencies
（来自
package.json
）
watch
npm运行脚本（来自
package.json
）
网页包配置文件（
Webpack.config.js
）
在监视模式下运行Webpack的命令行
谢谢，那是丢失的一环。不知何故，我一直在兜圈子，完全错过了这个选项。对于那些仅仅是webpack用户的人来说，一个例子是受欢迎的。如果你需要访问捆绑文件，最好在发出后使用
，
，因为
emit
是在Webpack开始发送文件时触发的。你能创建一个非e6版本吗？它被打包在：我把它简化为只传递一个js函数，而不是一个字符串命令到
exec
。工作正常。注意：这实际上是@Yair Tavor在他的anwser中建议的一个插件。@Olga将解决方案缩减到严格必要的程度是一个实际贡献，值得称赞。奎师那你可以通过解释与亚尔·塔沃的答案的不同来增强你的答案。据我所知，Yair Tavor的解决方案已经打包在webpack shell插件中，您建议的是如何使用它。值得一提的是，它可以帮助其他人了解这种情况。很好，它也适用于watch构建，Yair Tavor的解决方案似乎不是这样。请注意，如果您正在寻找之前的钩子等价物，您可以在编译之前尝试
。可以找到可用钩子的文档。您确定“”吗？Docs说它应该是“要运行的命令”：。当我在那里有一个路径时，它会抱怨权限：“/bin/sh:tasks/postbuild.sh:permission denied”@Andrey您可以提供一个要运行的命令，或者一个带有执行权限集的脚本文件的路径。若要解决您的问题，请尝试
chmod+x/path/To/script
Yes，但如果webpack包含子编译，它将无法工作
new CustomPlugin('RunTest', 'jest', 'beforeRun'),

"devDependencies": {
  "webpack": "5.3.2",
  "webpack-cli": "4.1.0",
  "webpack-shell-plugin-next": "2.0.4"
}

"scripts": {
  "watch": "webpack --config webpack.config.js --watch"
}

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
    plugins: [
        new WebpackShellPluginNext({
            onAfterDone: {
                scripts: ['echo "It works!"'],
                blocking: true,
                parallel: false
            }
        })
    ]
};

npm run watch