每次进行更改时都需要运行“npm run build”吗？答案

【问题标题】：Do I need to run "npm run build" every time I made changes?每次进行更改时都需要运行“npm run build”吗？
【发布时间】：2020-06-10 23:18:32
【问题描述】：

首先，我对 NPM 的东西真的很陌生。但我确实知道 React 和 PHP。所以我想自己创建一个 CMS 系统，使用 PHP 作为后端，React 作为前端，在 Babel 和 React 的 CDN 的帮助下（以及 ofc axios 进行数据请求和发送）。但是，我确实想通过实际网站使用 webpack 以更合适的方式。所以，我按照this article 的教程进行操作。他解释得很特别。但是，他使用 HTML，而在我的情况下，我有一个 PHP。因此，由于我并不完全清楚自己在做什么。我已将 HTMLWebPlugin 重定向到 webpack.config.js 中的 PHP 文件。

plugins: [
new HtmlWebPackPlugin({
  template: "./../index.php",
  filename: "./index.php"
})

但是，当我更改代码并刷新它时，除非我下次运行“npm run build”，否则网页将无法适应更改。我确实知道我正在从构建的应用程序中运行它。这是因为当网页呈现输出文件 (dist/main.js) 时，我宁愿对入口文件 (index.js) 进行更改。但是这样可以连接这两者吗？有没有办法自动适应我在入口文件中所做的更改？

【问题讨论】：

是的，@aamirl 先生！请在此处查看link。这是我的文件夹结构。 ReactApp 里面的东西和我上面提到的那篇文章是一样的。唯一的区别是 webpack.config.js 的“插件”。而且我没有使用 CRA。我刚刚关注了那篇文章，所以可能是 npm install。
我没有麦克风和网络摄像头，因为我在 PC 上使用它。不过谢谢你的帮助，先生。
对不起，我不是神能写几百行代码没有一个错误。 @Goran_Ilic_Ilke

标签： javascript node.js reactjs

【解决方案1】：

是的，有办法解决这个问题。你可以使用 webpack 的 Hot Module Replacement 功能。它只是在开发模式下使用适当的配置运行 webpack，您应该在 webpack 官方文档中找到这些配置。

【讨论】：

它不一定与我的问题有关，因为它只适用于模块更改，在我的情况下，不是。
不，您对代码进行的任何更改，都会针对该更改重新运行构建。这不是你要找的吗？

【解决方案2】：

所以最后，我找到了我的解决方案。当您想在每次文件更改时重新运行“npm run build”时。你需要通过 npm 安装 watch。它检查目录中的所有文件，当您更改某些内容或保存时，它将重新运行 package.json 中的所有脚本。所以步骤 -

通过“npm install watch”安装手表
安装 watch 后，添加 "watch": "watch 'npm run build' ./directory-you-want-to-track"
运行“npm run watch”

【讨论】：

谢谢；这对我有用。但是，它比我预期的要慢。我想知道stackoverflow.com/a/42773333/470749 是否会更快，但我无法让npm-watch 使用这个演示应用程序：github.com/reduxjs/redux/tree/master/examples/todos
为什么不使用webpack-dev-server？

【解决方案3】：

使用这个命令：

tsc src/index.ts --watch --outDir ./lib

参考：https://www.youtube.com/watch?v=F6aHIh5NglQ

【讨论】：