Webpack - 监视并启动nodemon？

Question

感谢@McMath 的优秀答案,我现在有webpack编译我的客户端和我的服务器.我现在正努力webpack --watch做到有用.理想情况下,当我的客户端发生变化时,我想让它为我的服务器进程生成类似nodemon的东西,以及当我的客户端发生变化时的某些类型的browserync.

我意识到它是一个捆绑器/加载器,而不是真正的任务运行器,但有没有办法实现这一目标？缺乏谷歌搜索结果似乎表明我正在尝试新的东西,但这一定已经完成了..

我总是可以将webpack包放到另一个目录并使用gulp来观察/复制它/ browsersync-ify它,但这看起来像是一个黑客..有更好的方法吗？

Answer 1

1. 安装以下依赖项:

npm install npm-run-all webpack nodemon

2. 将package.json文件配置为如下所示:

package.json

{
  ...

  "scripts": {
    "start"        : "npm-run-all --parallel watch:server watch:build",
    "watch:build"  : "webpack --watch",
    "watch:server" : "nodemon \"./dist/index.js\" --watch \"./dist\""
  },

  ...

}

执行此操作后,您可以使用以下命令轻松运行项目npm start.

不要忘记为Webpack配置WatchIgnorePlugin来忽略./dist文件夹.

依赖

1. npm-run-all - 用于并行或顺序运行多个npm脚本的CLI工具.
2. webpack - webpack是一个模块捆绑器.它的主要目的是捆绑JavaScript文件以便在浏览器中使用,但它也能够转换,捆绑或打包任何资源或资产.
3. nodemon - 在开发node.js应用程序期间使用的简单监视器脚本.

Answer 2

面对同样的问题,找到了下一个解决方案 - "webpack-shell-plugin".它

允许您在webpack构建之前或之后运行任何shell命令

那么,那是我在package.json中的脚本:

"scripts": {
      "clean": "rimraf build",
      "prestart": "npm run clean",
      "start": "webpack --config webpack.client.config.js",
      "poststart": "webpack --watch --config webpack.server.config.js",
}

如果我运行'start'脚本,它会启动下一个脚本序列:clean - > start - > poststart.还有一部分'webpack.server.config.js':

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

...
if (process.env.NODE_ENV !== 'production') {
    config.plugins.push(new WebpackShellPlugin({onBuildEnd: ['nodemon build/server.js --watch build']}));
}
...

"onBuildEnd"事件在首次构建后仅触发一次,重建不会触发"onBuildEnd",因此nodemon按预期工作

Answer 3

我喜欢nodemon-webpack-plugin的简单性

webpack.config.js

const NodemonPlugin = require('nodemon-webpack-plugin')

module.exports = {
  plugins: [new NodemonPlugin()]
}

然后用watch旗帜运行webpack

webpack --watch

Answer 4

除了@Ling 的好答案：

如果您想在使用 观看之前构建一次项目nodemon，您可以使用 webpack编译器钩子。在 webpack 完成编译后，该插件的代码就会nodemon在钩子中触发（另请参阅这篇有用的文章）。done

const { spawn } = require("child_process")

function OnFirstBuildDonePlugin() {
  let isInitialBuild = true
  return {
    apply: compiler => {
      compiler.hooks.done.tap("OnFirstBuildDonePlugin", compilation => {
        if (isInitialBuild) {
          isInitialBuild = false
          spawn("nodemon dist/index.js --watch dist", {
            stdio: "inherit",
            shell: true
          })
        }
      })
    }
  }
}

webpack.config.js：

  module.exports = {
    ... 
    plugins: [
      ... 
      OnFirstBuildDonePlugin()
    ]
  })

包.json：

"scripts": {
  "dev"  : "webpack --watch"
},

希望能帮助到你。