00:00
好的,我经过不断的尝试啊,终于把我们的这个依赖包呢下载下来了,对吧,那么这里呢,大家下载这些依赖包的时候还是一样啊,如果你实在下不下来,你就多下几遍,再下不下来用我们提供的也行。好,那么接下来呢,我们需要配置运行指令,我们来启动我们项目。生产模式下的内容呢,基本配置好了,我们接下来就可以运行它了,指令呢,我们就叫build,然后启动的时候呢,我们要把这个环境变量改成production。然后呢,不用serve啊,同时这里加PD,因为我们用的是这个文件。好了,那么待会儿呢,我们只需要NPM的build就可以了。OK n PM run build对项目进行打包。那么打包输出之后呢,它会输出到D层录下去,然后呢,我们就可以在D层目录下面运行看效果了。OK。右键打开。
01:01
好了,这时候呢,我们访问啊,都是没有任何问题的啊。但是这时候要注意的一个点就是如果你刷新的话呢,咱们会出现404问题。刷新页面会出现404问题,原因很简单,就是因为这里呢,它没有用上pad的那个DV server配置,现在我们启动的这个页面是右键通过Vs code的一个叫做live server的一个插件启动的。它并没有配置这个什么4049返回页面这项配置,它没有配置啊,所以我们现在刷新404是很正常的,未来呢,将你当然将你这个代码上线的时候啊,如果你部署到re上,Re上面有专门的配置可以去解决这个问题。当然这是上线的一些配置,咱们这里就不扩展了。反正就是这里刷新414没关系啊,只要你前面能正常访问即可。好,那么回到这里呢,我们啊,只要你能右键打开就可以了,我们这里呢,还有一个小问题,就是我们希望网站有一个logo图标。
02:01
对吧,那么就像我们的网站一样,这个图标呢,我也提前准备好了。在这个桌面上,我们就准备了一个图标。我们想把图标整上去,来把它图标呢,我们先移到PA下面。我希望打包的时候呢,这个图标呢,跟我一起打包到地层下去,同时网站啊,这个渲染的时候能看到的图标。好,那么这时候呢,我们就通过link标签诶。通过这个favorite icon啊,把这个图标呢给整上去,Type写不写都没关系啊。好啊,那么这样呢,我们就把图片写好了,写好了之后呢,我们打包的时候,让他打包输出到地上的下去,我们再次打包一下。这时候呢,我们会发现一个问题,就是这个图标并没有被打包到地层布下去,我们看啊,DS打包完了啊,它并没有打包到地层下去。所以此时如果你去打开页面访问的话呢,它会找不到这个图标。刷新。
03:00
啊,他根本就找不到这个图标,因为我们没有把图标打包过去。原因就是因为我们没有去加载这个资源,去打包它,HM资源呢,我们只是原封不动的输出,并没有解析里面的资源。而且将来包括public下面,我们可能还会放一些公共样式,放一些什么静态样式啊,静态的一些文件都可能放在这个public下面。所以这时候我们打包的时候,他都打包过去,这是一个问题,所以最后呢,我们要解决这个问题。好,这个问题的解决方法呢,就是我们需要把他下面资源呢,原封不动的复制到第四录下去就好了,直接复制过去就好了。复制过去之后呢,就相当于打包过去了。所以这里面呢,我们需要用上一个外派的一个最后的一个插件啊,叫copy派。好,那么这个插件呢,我们同样的可以去MPM网站上去给大家搜一下。Copy就是复制。专门用来复制的一个这样的一个插件。好啊,使用量也是很大的,首先呢,你只要把它下载下来,我们就可以用了,引入它,然后new调用copy wi发ing,然后在这里面传,从哪里复制到哪里就可以了。
04:12
我们下载。然后引入。看文档去,第一写就好了,然后最后就调用。OK,那么我们只要告诉他我们需要加PU,下面资源复制到D怎么拿下去,那么这里呢,我们建议大家写个绝路径,因为绝路径不容易出问题啊,下面路径可能会出问题,我们将这个public,我们要from就从哪来to,就是到哪去,到哪里去呢?到地怎么弄下去。对吧,从这来到这儿去。好,但是这样复制有个问题啊,它会把这个index HL文件也复制过去,而我们的HL外派party也会打包一个HL文件,那么就会有两个东西inl的文件,这样就会产生冲突。
05:05
所以我们复制过去的时候要忽略掉L,因为这个文件HL外派已经处理好了。好了,那么忽略选项呢,在这里面呢,它其实下面有有有那个说明。有一个叫lo options。对,文件操作的一个选项啊,在这里面呢,它专门有个选项叫ignore,用来忽略文件的。来,我们接下来继续写。我们只要写这个ignore文件就好了,我们忽略哪个文件呢?照着它规则类似的写就好了,我们忽略的是这个EXHL。啊,注意前面这个星星干啊,必须要加,否则他这个忽略会不成功的。啊,忽略这个文件就好了。OK,那么我们再打包一下。
06:05
你看那么打包的第四步动作下面呢,就会多一个这样的一个图标啊,它就打包过去了,那么我们将来就可以访问到它了。哎,这样呢就足够了,这种配置就足够了,我们呃,可以把它给打开一下。刷新啊,因为我访问的不是这根目啊,所以这样访问的话呢,这个图标现在有点呃出不来,可以通过我们之前讲过这个so这个包去访问啊serve这个地。那么这样呢,它会启动一个服务,那么这样访问呢?诶,你看这个图标就有了啊。因为我们必须要保证我们访的是根目录才行,如果访问的不是根目录,是外面这个目录的话,Live serve呢会默认以最外层目录去打开的,所以这个访问路径有问题,这个非I孔就加载不出来。所以我们用这个so,这个包去访问,那么就OK了。好了,那么以上呢,就是我们就完成了这个生产模式的一个配置,我们最后回顾一下。
07:07
往上走。我们呢,去搭建了这个,我们就是在DV配置的基础上呢,进行了修改。我们将输出目录指定了,加上呢,可能harsh来做这个更好的缓存,将扇子打包内容给清空掉了,就是这个,然后呢,我们改了样式的处理,我们提取样式成单独文件,用了个它上面的load和一个插件,还压缩了这个CS文件,那么压缩C文件呢,我们放到这个miniize里面去做,那么同时我们还需要压缩JS,否则JS会出问题。那么最后呢,我们还压缩了这个图片啊,图片配置去整过来,那么图片配置呢,这里稍微注意一下,就是它这个下载依赖比较难啊,所以大家要留意一下。然后呢,将模式呢改成production map等等,那么修改好我们的这个,然后把DB tool这些功能呢给删掉,还要把这个什么用HMR功能的。
08:03
功能给删掉就好了。OK,那么这样呢,我们就基本配置好了,当然呢,最后呢,为了这个图标能用,网上图标能用,我们又加了个copy的插件,它可以将public下面资源复制到diss下去,同时要忽略这种文件就好了,最后配置呢,指定我们就可以启动它,最后看到我们打包后的效果。好了,那么这里呢,就是生产模式下的这个。派这个脚手架的配置。你看。这些呢,都基本上是我们前面学过的东西,但有一些可能我们没有讲到过的,但是它的概念也不是特别难理解。好了,那么接下来大家就可以去尝试自己亲手搭建一下这个脚手架配置,看看你自己能不能完成它。
我来说两句