在 vue-cli 3.x 的 watch 模式下每个 webpack 自动构建后如何执行我自己的脚本？

Posted 2023-02-22

【中文标题】在 vue-cli 3.x 的 watch 模式下每个 webpack 自动构建后如何执行我自己的脚本？

【英文标题】：How to execute my own script after every webpack's auto build in watch mode of vue-cli 3.x?

【发布时间】：2020-02-08 01:18:23

【问题描述】：

我现在的情况

现在我正在使用 vue-cli@3.9.2。出于某种原因，我需要使用vue-cli-service build --watch 观察源代码的文件更改以运行 webpack 的构建。

我目前的解决方案

目前，我运行另一个 Node.js 进程来监视 webpack 包的文件更改。这种糟糕的开发经历让我深受打击。

与 vue-cli 2.x 比较

当我使用 vue-cli 2.x 时，我实际上在 build/build.js 中运行 webpack()，这是 webpack 的一个原生 API，因此我可以使用 webpack().watch() 来运行构建并将我自己的脚本作为回调函数传递.但是在 vue-cli 3.x 中，据我所知，没有办法也没有必要使用 webpack 的原生 API。

总结

我希望在 webpack 每次自动构建后运行我自己的脚本，虽然我在 vue-cli 的官方文档中找不到任何指导。

【参考方案1】：

据我了解 - 你有一个 Webpack 插件用例。就像 webpack-build-notifier 在重建后发送通知一样。

我不是 Webpack 插件作者，但这已经为我工作了：

// vue.config.js
const ArbitraryCodeAfterReload = function(cb) 
  this.apply = function(compiler) 
    if (compiler.hooks && compiler.hooks.done) 
      compiler.hooks.done.tap('webpack-arbitrary-code', cb);
    
  ;
;

const myCallback = function() 
  console.log('Implementing alien intelligence');
;

const plugins = [];
const isDev = process.env.NODE_ENV === 'development';
if (isDev) 
  plugins.push(new ArbitraryCodeAfterReload(myCallback));


module.exports = 
  configureWebpack: 
    plugins
  
;

如果这不是正确的编译步骤 - Webpack documentation 应该在某个地方为您的用例提供正确的 hook。

也许已经有一个可用的插件可以满足您的需求......

【讨论】：

这超出了我的认知，我没有写任何 webpack 插件。但是，如果我找不到任何现有的解决方案，我会尝试。非常感谢。

谢谢，成功了！但是，为 webpack 的 hook 创建一个插件是很奇怪的。

【参考方案2】：

也许这可以帮助你。这只是一个例子。你只需要使用&&

npm run start && npm run build

所以在 npm run start 脚本执行之后，你的 npm run build 脚本将在第一个之后运行

更新你可以使用这个包webpack-shell-plugin

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

new WebpackShellPlugin(
  onBuildStart: [''],
  onBuildEnd: ['']
)

【讨论】：

在监视模式下，它不会结束第一个命令，因此永远不会执行第二个命令。

你有 webpack 配置文件吗？

webpack config 由 vue-cli 管理和构建，我可以通过 vue-cli 对其进行编辑，最终构建的 config 非常复杂。

这对我来说很难，因为我无法修改 webpack 配置文件。但是我使用 webpack shell 命令来解决这个问题

@Array-Huang 再次检查我的答案。谢谢