最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】ReactJS的项目如何打包发布

ReactJS crifan 6867浏览 0评论

用Preact写好了一个项目,现在需要去搞清楚,如何打包发布

然后可以让移动端(iOS,Android)去用原生的app,去集成进去。

成为独立的app

其中,之前大概有了解过:

好像就是:

npm run build

貌似就是编译称为生产环境的版本

然后把build出来的东西

直接放到某个(nginx的)服务器上,然后访问url就可以了???

因为看到:

package.json

{
  "name": "preact-boilerplate",
  "version": "6.0.0",
  "description": "Ready-to-go Preact starter project powered by webpack.",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server –inline –hot –progress",
    "start": "serve build -s -c 1",
    "prestart": "npm run build",
    "build": "cross-env NODE_ENV=production webpack -p –progress",
    "prebuild": "mkdirp build && ncp src/assets build/assets",
    "lint": "eslint src"
  },

preact how to deploy

react how to deploy

目前没有build文件夹:

去build,估计就出来了:

➜  ucowsapp git:(master) ✗ pwd
/Users/crifan/dev/dev_root/daryun/Projects/xxx/ucowsapp
➜  ucowsapp git:(master) ✗ ll
total 512
-rw-r–r–    1 crifan  staff   5.0K  6 26 10:55 README.md
-rw-r–r–    1 crifan  staff    89B  6 26 10:55 jsconfig.json
drwxr-xr-x  836 crifan  staff    28K  6 30 16:03 node_modules
-rw-r–r–    1 crifan  staff   230K  6 30 16:03 package-lock.json
-rw-r–r–    1 crifan  staff   2.4K  6 30 16:03 package.json
drwxr-xr-x   15 crifan  staff   510B  6 26 17:29 src
-rw-r–r–    1 crifan  staff   5.8K  6 26 10:55 webpack.config.babel.js
➜  ucowsapp git:(master) ✗ npm run build
> [email protected] prebuild /Users/crifan/dev/dev_root/daryun/xxxucowsapp
> mkdirp build && ncp src/assets build/assets
> [email protected] build /Users/crifan/dev/dev_root/daryun/xxx/ucowsapp
> cross-env NODE_ENV=production webpack -p –progress
Hash: 57f8c5128609da681950
Version: webpack 2.6.1
Time: 46146ms
                               Asset       Size  Chunks                    Chunk Names
84f05a744c459d2972e659f138db15da.png     4.9 kB          [emitted]
2e1b1cde4c29d30c9f90bb8c3da41e36.png    1.56 kB          [emitted]
a1a42c53c77b10cb29864ccd1a0b2b27.png    1.18 kB          [emitted]
9084c0bfc2a0637844fb37b8a2e3a101.png    1.18 kB          [emitted]
7100c07099f225e78907aa5264ca177b.png    1.61 kB          [emitted]
d83f1c7c55bd1a02ee3758d39efb82f0.png    1.63 kB          [emitted]
fa5a2714456a42e161f920ca344f41c5.png    1.95 kB          [emitted]
cfd05591f69bf4ad805d5c49a1555dd4.png    1.98 kB          [emitted]
ce9f87508d7c459ec06c0c043804df47.png    4.47 kB          [emitted]
6a9ec0f25f1301c1ca446149e9dd909a.png    4.57 kB          [emitted]
4fe795957257c0c8f3eb5fd6abed388f.png    4.89 kB          [emitted]
78b4d3ee543317ee8e886920c436cb35.png    4.46 kB          [emitted]
daf40b57160c5b69d9550364df0dac95.png    1.49 kB          [emitted]
761f85231a1684b25d2e2b1ed8b1047f.png    4.51 kB          [emitted]
37f63ab68c3824c69c43f83e5d4a649a.png    4.79 kB          [emitted]
030d220acaba898078cc8c7452b4cf4f.png    4.44 kB          [emitted]
                           bundle.js     903 kB       0  [emitted]  [big]  main
                           style.css      38 kB       0  [emitted]         main
                       bundle.js.map    2.16 MB       0  [emitted]         main
                       style.css.map   86 bytes       0  [emitted]         main
                          index.html    1.24 kB          [emitted]
                       manifest.json  428 bytes          [emitted]
                         favicon.ico    15.1 kB          [emitted]
                               sw.js    9.88 kB          [emitted]
   [8] ../~/preact/dist/preact.js 20.4 kB {0} [built]
  [25] ../~/preact-redux/dist/preact-redux.js 38 kB {0} [built]
  [79] ../~/webpack/buildin/global.js 509 bytes {0} [built]
[279] ./index.js 1 kB {0} [built]
[280] ../~/babel-polyfill/lib/index.js 833 bytes {0} [built]
[293] ./container/app.js 6.58 kB {0} [built]
[307] ./lib/rem.js 511 bytes {0} [built]
[308] ./pwa.js 571 bytes {0} [built]
[309] ./store/store.js 7.19 kB {0} [built]
[330] ./style/index.less 41 bytes {0} [built]
[528] ../~/core-js/shim.js 7.38 kB {0} [built]
[777] ../~/es6-promise/auto.js 179 bytes {0} [built]
[781] ../~/isomorphic-fetch/fetch-npm-browserify.js 233 bytes {0} [built]
[797] ../~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
[837] multi babel-polyfill ./index.js 40 bytes {0} [built]
    + 823 hidden modules
Child __offline_serviceworker:
       [0] ../~/offline-plugin/tpls/empty-entry.js 0 bytes {0} [built]
       [1] ../~/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%7B%22match%22%3A%22/.*/%22%2C%22to%22%3A%22%5C%22/%5C%22%22%2C%22requestTypes%22%3A%5B%22navigate%22%5D%7D%5D%7D!../~/offline-plugin/tpls/empty-entry.js 18.9 kB {0} [built]
Child html-webpack-plugin for "index.html":
       [0] ../~/lodash/lodash.js 540 kB {0} [built]
       [1] ../~/html-webpack-plugin/lib/loader.js!./index.ejs 1.96 kB {0} [built]
       [2] ../~/webpack/buildin/global.js 509 bytes {0} [built]
       [3] ../~/webpack/buildin/module.js 517 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/main/style.less 596 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/estrus-pend/style.less 4 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/functions/style.less 661 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-management/style.less 5.32 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-add/style.less 2.16 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/abnormal-management/style.less 5.31 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cowshed-management/style.less 1.27 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/pregnancy-management/style.less 4.53 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/pregnancy-process/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-process/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cow-management/style.less 2.3 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/abnormal-process/style.less 2.28 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cow-edit-add/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cowshed-edit-add/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./style/index.less 2.16 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/profile/style.less 308 bytes {0} [built]
➜  ucowsapp git:(master) ✗

就可以看到build文件夹了:

其中看到一些css,js,index.html,ico,json,和很多png图片

以及assets中的很多图片

从:

Deploy React Apps in less than 30 Seconds | Netlify

感觉好像就是:

先npm run build

然后再去把build下面的东西 放到某个服务器上 貌似就可以了。

但是貌似还需要去设置各种相关的东西?

Redirect & Rewrite rules | Netlify

跳转

404

路由

查询参数

Fullstack React: Deploying a React app alongside a server to Heroku (and S3)

Deploying my first React App:reactjs

alanbsmith/react-node-example: an example react app to deploy to heroku

还需要一个服务器,用Node+Express之类的?

然后去试了试:

npm start

➜  ucowsapp git:(master) ✗ npm start
> [email protected] prestart /Users/crifan/dev/dev_root/daryun/xxx/ucowsapp
> npm run build
> [email protected] prebuild /Users/crifan/dev/dev_root/daryun/xxx/ucowsapp
> mkdirp build && ncp src/assets build/assets
> [email protected] build /Users/crifan/dev/dev_root/daryun/xxx/ucowsapp
> cross-env NODE_ENV=production webpack -p –progress
Hash: b5b9e97e41ebe52fb9b7
Version: webpack 2.6.1
Time: 46329ms
                               Asset       Size  Chunks                    Chunk Names
84f05a744c459d2972e659f138db15da.png     4.9 kB          [emitted]
2e1b1cde4c29d30c9f90bb8c3da41e36.png    1.56 kB          [emitted]
a1a42c53c77b10cb29864ccd1a0b2b27.png    1.18 kB          [emitted]
9084c0bfc2a0637844fb37b8a2e3a101.png    1.18 kB          [emitted]
7100c07099f225e78907aa5264ca177b.png    1.61 kB          [emitted]
d83f1c7c55bd1a02ee3758d39efb82f0.png    1.63 kB          [emitted]
fa5a2714456a42e161f920ca344f41c5.png    1.95 kB          [emitted]
cfd05591f69bf4ad805d5c49a1555dd4.png    1.98 kB          [emitted]
ce9f87508d7c459ec06c0c043804df47.png    4.47 kB          [emitted]
6a9ec0f25f1301c1ca446149e9dd909a.png    4.57 kB          [emitted]
4fe795957257c0c8f3eb5fd6abed388f.png    4.89 kB          [emitted]
78b4d3ee543317ee8e886920c436cb35.png    4.46 kB          [emitted]
daf40b57160c5b69d9550364df0dac95.png    1.49 kB          [emitted]
761f85231a1684b25d2e2b1ed8b1047f.png    4.51 kB          [emitted]
37f63ab68c3824c69c43f83e5d4a649a.png    4.79 kB          [emitted]
030d220acaba898078cc8c7452b4cf4f.png    4.44 kB          [emitted]
                           bundle.js     903 kB       0  [emitted]  [big]  main
                           style.css      38 kB       0  [emitted]         main
                       bundle.js.map    2.16 MB       0  [emitted]         main
                       style.css.map   86 bytes       0  [emitted]         main
                          index.html    1.24 kB          [emitted]
                       manifest.json  428 bytes          [emitted]
                         favicon.ico    15.1 kB          [emitted]
                               sw.js    9.88 kB          [emitted]
   [8] ../~/preact/dist/preact.js 20.4 kB {0} [built]
  [25] ../~/preact-redux/dist/preact-redux.js 38 kB {0} [built]
  [79] ../~/webpack/buildin/global.js 509 bytes {0} [built]
[279] ./index.js 1 kB {0} [built]
[280] ../~/babel-polyfill/lib/index.js 833 bytes {0} [built]
[293] ./container/app.js 6.58 kB {0} [built]
[307] ./lib/rem.js 511 bytes {0} [built]
[308] ./pwa.js 571 bytes {0} [built]
[309] ./store/store.js 7.19 kB {0} [built]
[330] ./style/index.less 41 bytes {0} [built]
[528] ../~/core-js/shim.js 7.38 kB {0} [built]
[777] ../~/es6-promise/auto.js 179 bytes {0} [built]
[781] ../~/isomorphic-fetch/fetch-npm-browserify.js 233 bytes {0} [built]
[797] ../~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
[837] multi babel-polyfill ./index.js 40 bytes {0} [built]
    + 823 hidden modules
Child __offline_serviceworker:
       [0] ../~/offline-plugin/tpls/empty-entry.js 0 bytes {0} [built]
       [1] ../~/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%7B%22match%22%3A%22/.*/%22%2C%22to%22%3A%22%5C%22/%5C%22%22%2C%22requestTypes%22%3A%5B%22navigate%22%5D%7D%5D%7D!../~/offline-plugin/tpls/empty-entry.js 18.9 kB {0} [built]
Child html-webpack-plugin for "index.html":
       [0] ../~/lodash/lodash.js 540 kB {0} [built]
       [1] ../~/html-webpack-plugin/lib/loader.js!./index.ejs 1.96 kB {0} [built]
       [2] ../~/webpack/buildin/global.js 509 bytes {0} [built]
       [3] ../~/webpack/buildin/module.js 517 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/main/style.less 596 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/functions/style.less 661 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/pregnancy-management/style.less 4.53 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-management/style.less 5.32 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/estrus-pend/style.less 4 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-add/style.less 2.16 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/pregnancy-process/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/abnormal-process/style.less 2.28 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/abnormal-management/style.less 5.31 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/breeding-process/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cow-management/style.less 2.3 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cowshed-management/style.less 1.27 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cow-edit-add/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/cowshed-edit-add/style.less 2.17 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./style/index.less 2.16 kB {0} [built]
Child extract-text-webpack-plugin:
       [0] ../~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ../~/css-loader?{"modules":true,"sourceMap":false,"importLoaders":1}!../~/postcss-loader/lib?{"sourceMap":false}!../~/less-loader/dist?{"sourceMap":false}!./container/profile/style.less 308 bytes {0} [built]
> [email protected] start /Users/crifan/dev/dev_root/daryun/xxx/ucowsapp
> serve build -s -c 1
   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   – Local:            http://localhost:5000      │
   │   – On Your Network:  http://192.168.1.11:5000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

然后去浏览器访问:

http://192.168.1.11:5000/

http://localhost:5000

然后就可以正常显示了:

貌似是:

服务器端,把build的东西都放到服务器对应的路径中,然后就可以了?

How to deploy a create-react-app

然后服务器端去配置一下nginx的conf

就可以了?

Deploying React with Zero Configuration | Heroku

mars/create-react-app-buildpack: Heroku Buildpack for create-react-app: static hosting for React.js web apps

看到此处的build下面的index.html是加载了bundle.js的:

mhart/react-server-example: A simple example of how to do server-side rendering with React (no compilation needed)

Create a Preact App from Scratch

用php的服务器,放在www目录下即可。

php -S localhost:8080

Understanding React deployment – Bartosz Szczeciński – Medium

先选个服务器

  • 如果你的app是server-side rendering服务器端渲染的 -》你需要选用一个Node服务器
  • 否则,即client-side rendering,虽然选个服务器就好:
    • apache, nginx, express,某个CND(比如Amazon S3)

去看看此处用到的Uglify:

  ]).concat(ENV===’production’ ? [
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false
      },
      compress: {
        unsafe_comps: true,
        properties: true,
        keep_fargs: false,
        pure_getters: true,
        collapse_vars: true,
        unsafe: true,
        warnings: false,
        screw_ie8: true,
        sequences: true,
        dead_code: true,
        drop_debugger: true,
        comparisons: true,
        conditionals: true,
        evaluate: true,
        booleans: true,
        loops: true,
        unused: true,
        hoist_funs: true,
        if_return: true,
        join_vars: true,
        cascade: true,
        drop_console: true
      }
    }),

此处有publicPath的:

/webpack.config.babel.js

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: [‘babel-polyfill’, ‘./index.js’],
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: ‘/’,
    filename: ‘bundle.js’
  },

此处去试试,把打包出来的build的东西都放到服务器上,结果去访问对应的路径:

http://116.62.25.57/app/

-》

http://116.62.25.57/app/index.html

但是显示白屏:

可以看到,是没有加载出来:

http://116.62.25.57/bundle.js

http://116.62.25.57/style.css

所以,去试试,修改那个:

publicPath

为:

    // publicPath: ‘/’,
    publicPath: ‘/app’,

生成的路径中,就都带对应前缀了:

结果访问:

http://116.62.25.57/app/

出现了主页面的tab了,但是内容没出来

去调试发现路径不对:

http://116.62.25.57/appdaf40b57160c5b69d9550364df0dac95.png

应该是:

http://116.62.25.57/app/daf40b57160c5b69d9550364df0dac95.png

所以重新修改配置为:

    // publicPath: ‘/’,
    publicPath: ‘/app/’,

然后大部分的内容是可以加载了:

但是还有几个问题:

(1)必须点击一下tab 比如首页 功能列表

然后内容才会出现:

(2)页面地址栏中的显示出来的路由地址,会实时变化为,不带此处的/app/的地址

是:

http://116.62.25.57/function

而不是:

http://116.62.25.57/app/function

(3)其他一些资源,还是无法加载

地址是:

http://116.62.25.57/assets/top01.jpg

而不是:

http://116.62.25.57/app/assets/top01.jpg

感觉终极的解决办法是:

需要服务器端,去配置nginx,把所有的访问:

http://116.62.25.57/

自动跳转到:

http://116.62.25.57/app/

这样就可以避免各种资源加载的问题了。

->但是后来发现这个配置有问题

-》会导致此服务器中所有的路径访问,都会把根目录的地址,跳转到此app,那就影响此服务器端所有的应用了。

-》所以还是需要自己解决此处的图片加载问题。

【workaround】ReactJS中已配置Webpack的publicPath后图片仍无法加载

【总结】

对于ReactJS来说,部署项目,其实就是:

1.打包

npm run build

会去运行:

cross-env NODE_ENV=production webpack -p —progress

内部会:

把图片等资源进行压缩,对js会去unglify等等

最终输出所有内容到build文件夹中

2.把build中的所有内容,放到服务器上(通过nginx去访问,即可)

3.此处,由于放在服务器的某个路径下(主路径是另外一个主网站),所以会存在需要把一些图片等路径,加上前缀(此处的/uap)后:

即,去修改:

webpack.config.babel.js

  output: {
    path: path.resolve(__dirname, "build"),
    // publicPath: ‘/’,
    publicPath: ‘/uapp/‘,

然后build出来的内容到服务器上,图片等资源才能正常加载。

4.其他更多细节,参考:

Understanding React deployment – Bartosz Szczeciński – Medium

转载请注明:在路上 » 【基本解决】ReactJS的项目如何打包发布

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.202 seconds, using 22.14MB memory