Can't deploy webpack to gh-pages (react app)

问题

First time using webpack as well as deploying using gh-pages. I cloned a webpack project from a udemy course. Instructor doesn't get into how to actually use webpack. It's telling me that [etc.]/build doesn't exist. When I create a build folder, I get the same error.

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
    }
  }
};

When I run yarn run deploy:

> 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.

回答1:

You are receiving an error because build/ does not exist. Using the -d (or --dir) flag sets the basePath for the gh-pages tool.

You can change the script within package.json to "deploy": "gh-pages -d WeatherReact" which should deploy that folder and its contents.

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

来源：https://stackoverflow.com/questions/52284888/cant-deploy-webpack-to-gh-pages-react-app

标签

reactjs

Webpack

github-pages