在heroku上进行uglify之后如何使用webpack部署angularjs应用程序

Question

我需要部署一个 angularjs 应用。

在我使用 webpack 丑化生产应用程序之后。出现以下命令。

当我运行 webpack-dev-server 时，应用程序运行良好

Hash: 06f0e2d056b597c4e43f
Version: webpack 1.13.2
Time: 16533ms
    Asset     Size  Chunks             Chunk Names
bundle.js  4.37 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
  [13] ./src/index.js 2.69 kB {0} [built]
    + 12 hidden modules

WARNING in bundle.js from UglifyJs
Side effects in initialization of unused variable $element [./~/angular/angular.js:9552,0]
Dropping unreachable code [./~/angular/angular.js:20263,0]
Dropping unused variable expression [./~/angular/angular.js:15347,0]
Dropping unused function includes [./~/angular/angular.js:799,0]
Dropping unused function nodesetLinkingFn [./~/angular/angular.js:10162,0]
Dropping unused function directiveLinkingFn [./~/angular/angular.js:10169,0]
Side effects in initialization of unused variable check [./~/markdown/lib/markdown.js:1044,0]
Dropping unused variable lines [./~/markdown/lib/markdown.js:350,0]
Dropping unused variable number_list [./~/markdown/lib/markdown.js:427,0]
Side effects in initialization of unused variable old_tree [./~/markdown/lib/markdown.js:705,0]
Dropping unused variable lastIndex [./~/markdown/lib/markdown.js:775,0]
Condition always false [./~/markdown/lib/markdown.js:1718,0]
Dropping unreachable code [./~/markdown/lib/markdown.js:1720,0]

但是当我尝试运行丑陋的生产应用程序时，同样的错误不断弹出。 （见下文）

我运行的命令是node ./src/bundle.js（丑化后的输出）

C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21
O=x||k;else{O=x||S,_=[];for(var V in o)Nr.call(o,V)&&"$"!==V.charAt(0)&&_.push(V)}for(w=_.length,T=new Array(w),f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],A=O(C,E,f),$[A])M=$[A],delete $[A],I[A]=M,T[f]=M;else{if(I[A])throw r(T,function(e){e&&e.scope&&($[e.id]=e)}),s("dupes","Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}",h,A,E);T[f]={id:A,scope:void 0,clone:void 0},I[A]=!0}for(var D in $){if(M=$[D],N=pe(M.clone),i.leave(N),N[0].parentNode)for(f=0,v=N.length;f<v;f++)N[f][a]=!0;M.scope.$destroy()}for(f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],M=T[f],M.scope){g=j;do g=g.nextSibling;while(g&&g[a]);c(M)!=g&&i.move(pe(M.clone),null,j),j=l(M),u(M.scope,f,y,E,b,C,w)}else d(function(e,t){M.scope=t;var n=p.cloneNode(!1);e[e.length++]=n,i.enter(e,null,j),j=n,M.clone=e,I[M.id]=M,u(M.scope,f,y,E,b,C,w)});$=I})}}}}],Ua="ng-hide",Fa="ng-hide-animate",qa=["$animate"

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8320)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8704)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:22:1478)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:289)
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169)
    at C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:256
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:261)

我的 Github 回购是通过这个链接Github repo 有人可以提供帮助和建议吗？

Answer 1

如果你的 web 应用程序可以在 webpack-dev-server 上运行，只要你的代码可以在 uglification（uglify 插件）中存活。您只需要设置自己的迷你服务器，即可呈现您的静态/动态资产。

我会从 node.js 和 npm 方法来解释。

如果您要部署到 Heroku，则需要使用 2 个脚本 postinstall 和 start。 postinstall 基本上意味着您将执行 webpack -p 任务，生产准备好所有 js 文件到基于 webpack.config.js 的单个捆绑文件中。 start 会触发迷你服务器渲染网页应用。

一旦您使用git push heroku master 将代码推送到heroku master，这两个命令将自动在heroku 上运行。 npm run postinstall 将首先运行，然后是 npm start。

请勿将 webpack-dev-server 用于任何形式的部署。

请参阅我的 github 存储库以获取更多详细信息。

Github repo