无法将 webpack 部署到 gh-pages（反应应用程序）答案

【问题标题】：Can't deploy webpack to gh-pages (react app)无法将 webpack 部署到 gh-pages（反应应用程序）
【发布时间】：2018-09-11 22:14:54
【问题描述】：

第一次使用 webpack 以及使用 gh-pages 进行部署。我从 udemy 课程中克隆了一个 webpack 项目。讲师没有深入了解如何实际使用 webpack。它告诉我 [etc.]/build 不存在。当我创建一个构建文件夹时，我得到了同样的错误。

package.json:

  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "build": "webpack -p --config ./webpack.production.config.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

webpack.production.config.js：

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname,
    publicPath: "/WeatherReact/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      }
    ]
  },
  resolve: {
    extensions: ["", ".js", ".jsx"]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: "./",
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

当我运行纱线运行部署时：

> webpack -p --config ./webpack.production.config.js

Hash: 252097b8991e3c14f1e3
Version: webpack 1.15.0
Time: 8098ms
    Asset    Size  Chunks             Chunk Names
bundle.js  456 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 111 hidden modules

WARNING in bundle.js from UglifyJs
Side effects in initialization of unused variable subscriptionShape [./~/react-redux/lib/utils/PropTypes.js:12,0]
Side effects in initialization of unused variable storeShape [./~/react-redux/lib/utils/PropTypes.js:19,0]
Condition always true [./~/hoist-non-react-statics/index.js:6,0]
Side effects in initialization of unused variable support [./~/lodash/index.js:932,0]
Condition always true [./~/lodash/index.js:12323,0]
Dropping unreachable code [./~/lodash/index.js:12337,0]
Side effects in initialization of unused variable moduleExports [./~/lodash/index.js:266,0]
Dropping unreachable code [./~/react-dom/cjs/react-dom.development.js:2297,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:5500,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:14809,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:15147,0]
Dropping unreachable code [./~/react-dom/cjs/react-dom.development.js:15212,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:15331,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:15338,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:15346,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:15351,5]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11616,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11680,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11723,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11758,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11775,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11811,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11825,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11883,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:11290,0]
Dropping unreachable code [./~/react-dom/cjs/react-dom.development.js:16191,0]
Dropping unreachable code [./~/react-dom/cjs/react-dom.development.js:16200,0]
Declarations in unreachable code! [./~/react-dom/cjs/react-dom.development.js:16200,0]
Dropping unreachable code [./~/react-dom/cjs/react-dom.development.js:16201,0]
Dropping unused variable parentNamespace [./~/react-dom/cjs/react-dom.development.js:16200,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:16383,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:16397,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:16416,0]
Condition left of && always true [./~/react-dom/cjs/react-dom.development.js:16421,0]
Condition always true [./~/react-sparklines/build/index.js:2,0]
Dropping unreachable code [./~/react-sparklines/build/index.js:4,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1511,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1626,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1843,0]
Side effects in initialization of unused variable height [./~/react-sparklines/build/index.js:1844,0]
Condition always true [./~/symbol-observable/lib/index.js:22,1]
Dropping unreachable code [./~/symbol-observable/lib/index.js:25,0]
$ gh-pages -d build
ENOENT: no such file or directory, stat '/Users/zacharysedefian/Projects/React/WeatherReact/build'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

【问题讨论】：

也许create-react-app 会是你更好的选择？
会的。但是我 fork 的项目是用 webpack 做的。当我尝试将组件迁移到 create-react-app 时，我实际上遇到了更多错误（谷歌地图集成、缺少样式、CORS 块等）
@BlakeSedefian，我也遇到过这个问题，过去我没有从 SO 或 Github 客户支持那里得到好的答案。或者至少不是一个对我有意义的答案。您是否研究过 gh-pages 的替代品？你有这种灵活性吗？

标签： reactjs webpack github-pages

【解决方案1】：

您收到错误消息，因为build/ 不存在。使用-d（或--dir）标志为gh-pages 工具设置basePath。

您可以将package.json 中的脚本更改为"deploy": "gh-pages -d WeatherReact"，这将部署该文件夹及其内容。

CLI rules on gh-pages Github https://github.com/afc163/gh-pages-cli

【讨论】：