Question

每次我推送到heroku时，它只是说＆＃34; Not Found＆＃34;。我假设这是因为webpack没有运行？

我尝试过各种各样的剧本：

"scripts": {
  "clean": "rimraf dist",
  "build": "npm run clean && NODE_ENV=production && webpack -p --progress",
  "postinstall": "npm run builds",
  "serve": "webpack-dev-server"
}

和另一个，没有postinstall。

使用postinstall的那个会给我一个错误，说webpack没有安装（保存在我的devDependencies下）。在第二个我得到了Heroku日志的成功构建，但是没有找到＆＃34;当我加载页面时。

Answer 1

您需要在package.json中的“dependencies”下放置webpack（以及Heroku所需的任何其他依赖项），而不是“devDependencies”下。

Answer 2

我认为更好的方法是保持你的package.json干净，而且由于Heroku使得构建东西变得更加困难，只需处理这个特定情况。

我们使用NPM postinstall挂钩来执行构建任务，为这些任务加载dev依赖项，清理等等。

来自package.json的脚本部分：

"scripts": { 
  "postinstall": "node ./ops/heroku-build.js" 
}

heroku-build.js：

'use strict';

if ('HEROKU' in process.env || ('DYNO' in process.env && process.env.HOME === '/app')){

  const pkg = require('../package.json');
  const ChildProcess = require('child_process');


  let deps = pkg.devDependencies;
  let packages = "";

  Object.keys(deps).forEach((key) => {
    packages += `${key}@${deps[key]} `; // note space at end to separate entries
  });

  try {
    console.time("install");
    console.log("starting npm install of dev dependencies");
    ChildProcess.execSync(`npm install ${packages}`);
    console.timeEnd("install");

    console.time("build");
    console.log("starting npm build");
    ChildProcess.execSync(`npm run build:all`);
    console.timeEnd("build");

    console.time("uninstall");
    console.log("starting npm uninstall of dev dependencies");
    ChildProcess.execSync(`npm uninstall ${packages}`);
    console.timeEnd("uninstall");
  }
  catch (err) {
    console.error(err.message);
  }
} else {
  console.log("Not Heroku, skipping postinstall build");
}

这样，如果我们决定在未来部署到AWS或其他地方，我们可以单独处理其环境的特性。

Heroku documentation on how to customize the build process

在Heroku上托管使用Wepback构建的生产React应用程序

2 个答案: