第一篇文章是:“使用角cli生成angular5项目”:https://www.jb51.net/article/136621.htm
第二篇文章是:“使用角cli从蓝本生成代码”:https://www.jb51.net/article/137031.htm
第三篇文章是:“使用角CLI生成路由”:https://www.jb51.net/article/137033.htm
构建主要会做以下动作:
-
<李>编译项目文件并输出到某个目录
<李>构建目标决定了输出的结果李
<李>捆绑打包李
<李>生产环境的建立还会进行糟蹋和tree-shaking(把没用的代码去掉)
<强> ng。
可以先看帮助:
针对开发环境,就是用命令ng。
默认情况下,它的输出目录在.angular-cli。json文件里ourDir属性配置的,默认是/dist目录。
构建之后会看见dist里面有这些文件:
-
<李> inline.bundle。js这是webpack的运行时。
<李> main.bundle。js就是程序代码。
<李> pollyfills.bundle。js就是浏览器的Pollyfills。
<李> styles.bundle。李js样式
<李> vendor.bundle。js是角和第三方库李
可以使用source-map-explorer来分析依赖,并且查看哪些模块和类在包里面。
首先修改上一个例子中的代码:
执行ng构建:
可以看到生成了这些文件。
把dist里面的index . html格式化一下看看:
可以看到它引用了生成的5个js文件。
打开main.bundle.js可以看到我写的代码:
下面运行程序:ng - o服务:
可以看到在ng服务的时候,加载了上述的文件。
因为ng构建是开发时的构建,所以没有做任何优化,文件挺大的。
这时看一下文件目录,并没有dist目录:
那么这些文件是怎么被服务的呢& # 63;
这是因为,这时候webpack是在内存中进行的服务。
下面使用source-map-explorer进行分析,首先安装它:
然后执行ng构建,再执行:
结果会生成这个图形:
再看看vendor.bundle的情况:
这里面东西就比较多了。
<强>构建目标和环境。
环境是指采用哪一个环境文件:
而目标则是用来决定项目文件是如何被优化的。
看一下开发和生产构建的对比。
