1.[Andriod]之Andriod布局 VS WinPhone布局
0.写在前面的话
近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个窝火啊,去你妹的兼容性,,,
最近体验下Android开发,第一件事就是翻翻看安卓提供的布局方式方便不,因为笔者现在是做WP的,于是乎有了这篇比较两个平台提供的一些基础的布局方式的博文。
另外,安装完Android Studio后,在Android的SDK的目录下有一个docs的文件夹,这里面提供的有离线的官方文档。
Android应用在当前元素上的布局属性均以layout_开头,大家可以结合离线的官方文档(布局属性的介绍在sdk\docs\reference\android\widget\***.LayoutParams.html文件有详细说明)在IDE中多多尝试各种的以layout_开头的属性。
1.两平台布局方式概览
Android常用的基本布局元素:LinearLayout,FrameLayout,AbsoluteLayout,RelativeLayout,TableLayout,GridLayout。
Windows Phone常用的基本布局元素:StackPanel、Canvas、Grid,WrapPanel;
罗列完毕,下面根据相似的布局一一对比。
2.LinearLayout VS StackPanel
别看这两位名字差异很大,堆积面板也好,线性布局也好,其实都是干的一件事,水平或者垂直排列子元素。
- Android-LinearLayout:使用android:orientation属性来控制子元素排列方向,子元素还以使用android:layout_weight属性来控制自身的拉伸权重。
- WinPhone-StackPanel:使用Orientation属性控制子元素的排列方向。
先来一个StackPanel的DEMO:
<StackPanel Orientation="Horizontal"
Background="#f00">
<Button Content="水平排放的按钮1" />
<Button Content="水平排放的按钮2" />
</StackPanel> <StackPanel Orientation="Vertical"
Background="#00f">
<Button Content="垂直排放的按钮1" />
<Button Content="垂直排放的按钮2"
HorizontalAlignment="Right" />
</StackPanel>
再来一个LinearLayout的DEMO(顺带了解到一个格式化代码的快捷键"Ctrl+Alt+L"):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
android:orientation="horizontal"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="水平排放的按钮1" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="水平排放的按钮2" /> </LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000ff"
android:orientation="vertical"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="垂直排放的按钮1" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="垂直排放的按钮2" />
</LinearLayout>
代码虽然不同,但是效果是一样一样的(左边WP右边安卓)...

看看LinearLayout的子元素应用android:layout_weight属性后是怎样的表现:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="水平排放的按钮1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="水平排放的按钮2" />
</LinearLayout>
效果如下(起初我以为是按照1+2等于3,第一个元素占1/3,第二个元素占2/3,结果却并非如此。其中缘由读者自行品味“权重”二字吧):

3.FrameLayout&AbsoluteLayout VS Canvas
在官方文档布局介绍文档中已经不见FrameLayout和AbsoluteLayout这两位了,估计是在安卓如此丰富的设备分辨率下以及很少有场景能用到这两种布局方式了。
- Android-FrameLayout:以FrameLayout的左上角为基准起始位置,第一个子元素在第一层,第二个子元素在第二层,,,依次类推,就像千层饼一样。
- Android-AbsoluteLayout:以AbsoluteLayout的左上角为基准起始位置([0,0]点),子元素利用二维坐标系android:layout_x和android:layout_y(距离[0,0]点的偏移量)进行布局;如果后面的子元素区域和前面的子元素区域重合,则也会像FrameLayout的子元素一样遮盖住前面的子元素。
- WinPhone-Canvas:布局行为上等同于FrameLayout和AbsoluteLayout的结合体,为子元素提供Canvas.Left,Canvas.Top和Canvas.ZIndex三个附加属性来控制子元素在当前Canvas中的绝对位置和层级。
先上一个Canvas的DEMO:
<Canvas>
<Border Canvas.Left="60"
Canvas.Top="60"
Canvas.ZIndex="1"
Height="80"
Width="80"
Background="#FFF" />
<Border Height="200"
Width="200"
Background="#F00" />
<Border Canvas.Left="20"
Canvas.Top="20"
Height="160"
Width="160"
Background="#0F0" />
<Border Canvas.Left="40"
Canvas.Top="40"
Height="120"
Width="120"
Background="#00F" />
</Canvas>
在来一个FrameLayout和AbsoluteLayout的DEMO:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#ff0000" />
<LinearLayout
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:background="#00ff00" />
<LinearLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#0000ff" />
<LinearLayout
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="#ffffff" />
</FrameLayout>
<AbsoluteLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#ff0000" />
<LinearLayout
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:layout_x="20dp"
android:layout_y="20dp"
android:background="#00ff00" />
<LinearLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_x="40dp"
android:layout_y="40dp"
android:background="#0000ff" />
<LinearLayout
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_x="60dp"
android:layout_y="60dp"
android:background="#ffffff" />
</AbsoluteLayout>
看看效果图吧(左WP,右上FrameLayout,右下AbsoluteLayout),也是一样一样的...

4.RelativeLayout VS WrapPanel
- Android-RelativeLayout:相对布局可以让子元素控制与父容器(RelativeLayout)的相对位置、控制与其他兄弟子元素的相对位置,常用的Layout属性为(均应用在子元素身上):
- android:layout_centerHrizontal ture|false :在父容器中水平居中
- android:layout_centerVertical ture|false:在父容器中垂直居中
- android:layout_centerInparent ture|false:在父容器中水平且垂直完全居中
- 上述3个属性控制子元素的居中问题。
- android:layout_alignParentBottom ture|false:停靠在父容器的底部
- android:layout_alignParentLeft ture|false:停靠在父容器的左部
- android:layout_alignParentRight ture|false:停靠在父容器的右部
- android:layout_alignParentTop ture|false:停靠在父容器的顶部
- 以上4个属性控制子元素是在父容器的上下左右方向上的对齐问题。
- android:layout_below @+id/xxid:在指定兄弟元素的下边
- android:layout_above @+id/xxid:在指定兄弟元素的的上边
- android:layout_toLeftOf @+id/xxid:在指定兄弟元素的左边
- android:layout_toRightOf @+id/xxid:在指定兄弟元素的右边
- 以上4个属性控制子元素相对与指定兄弟元素的位置。
- android:layout_alignTop @+id/xxid:与指定兄弟元素的上边对齐
- android:layout_alignLeft @+id/xxid:与指定兄弟元素的左边对齐
- android:layout_alignBottom @+id/xxid:与指定兄弟元素的下边对齐
- android:layout_alignRight @+id/xxid:与指定兄弟元素的右边对齐
- 以上4个属性控制子元素相对与指定兄弟元素的对齐方式。
- android:layout_marginBottom xxdp:距离某元素的下边距
- android:layout_marginLeft xxdp:距离某元素左边距
- android:layout_marginRight xxdp:距离某元素右边距
- android:layout_marginTop xxdp:距离某元素上边距
- 以上4个属性控制子元素相对于其他元素的相对外边距,注意:如果当前元素没有指定其相对的兄弟元素,则相对于父容器RelativeLayout。
- WinPhone-WrapPanel:我把WinPhone中这个布局容器称为可换行的StackPanel,也具有Orientation属性来控制子元素的排列方向,同时增加了ItemHeight和ItemWidth属性来控制元素的有效宽高,如果不设置这两个属性则以子元素的实际宽高来排序。和Android的RelativeLayout没什么相似之处(WrapPanel功能也弱了好多),和LinerLayout倒是有点相似。
先看一看WrapPanel的DEMO吧:
<toolkit:WrapPanel Orientation="Horizontal"
ItemHeight="200"
ItemWidth="200">
<Rectangle Width="100"
Height="200"
Fill="#F00"
HorizontalAlignment="Left" />
<Rectangle Width="200"
Height="200"
Fill="#0F0" />
<Rectangle Width="200"
Height="100"
Fill="#00F"
VerticalAlignment="Bottom" />
</toolkit:WrapPanel>
效果如下(如果不设置ItemHeight和ItemWidth,则3个元素会紧挨着,蓝色的还是在第二行,因为第一行装不下,这就是Wrap提供的功能):

看下强大灵活的RelativeLayout的DEMO:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#F00"
android:layout_marginBottom="2dp">
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="水平居中"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="垂直居中"
android:layout_centerVertical="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="水平且垂直居中"
android:layout_centerInParent="true" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#F00"
android:layout_marginBottom="2dp">
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="停靠在父容器左上角"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="停靠在父容器右上角"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="停靠在父容器右下角"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#00F"
android:text="停靠在父容器左下角"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true" />
</RelativeLayout> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F00"
android:layout_marginBottom="2dp">
<Button
android:id="@+id/btn1"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#00F"
android:text="第一个元素"
android:layout_centerInParent="true" />
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="在第一个元素右边且和起一个元素上边对齐"
android:layout_toRightOf="@+id/btn1"
android:layout_alignTop="@+id/btn1"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="在第一个元素左边且和起一个元素下边对齐"
android:layout_toLeftOf="@+id/btn1"
android:layout_alignBottom="@+id/btn1"/>
</RelativeLayout>
效果图如下(其实RealtiveLayout还允许子元素设置更多的属性来控制相对布局,我在上面列的只是几个比较常见的,有兴趣的可以翻阅一下官方的文档(sdk/docs/reference/android/widget/RelativeLayout.LayoutParams.html)或者在IDE中实验一下其他的布局属性):

5.TableLayout&GridLayout VS Grid
TableLayout也不再官方的推荐之列了,取而代之的是API Level14(Android4.0)中新增的GridLayout布局。
- Android-TableLayout:表哥布局,行:一行一个TableRow对象或者一个View对象;列:一个子元素为一列;TableLayout通过android:collapseColumns控制隐藏的列、通过android:stretchColumns控制列的拉伸、通过android:shrinkColumns控制列的收缩,但是无法设置固定的行数和列数(行数和列数按行列上出现的最大子元素数量为准);子元素可以通过android:layout_colum属性控制自己排在第几列、通过android:layout_span控制自己可以横跨几列,但是无法实现跨行显示。
- Android-GridLayout:针对上述的TableLayout存在的问题,Google在API Level14(Android4.0)中引入可新的布局容器GridLayout。GridLayout通过android:orientation设置子元素是水平还是垂直排序,通过android:rowCount控制行数,通过android:columnCount控制列数;子元素可以通android:layout_row设置所在行、 通过android:layout_column设置所在列、通过android:layout_rowSpan设置跨几行、 通过android:layout_columnSpan设置跨几列。
- WinPhone-Grid:Grid是WinPhone开发中最常用的布局容器,可以通过设置行数、列数以及行列的宽高(可以是固定值或者比例值或者自动根据子元素来确定),子元素通过附加属性Grid.Row、Grid.Column、Grid.RowSpan和Grid.ColumnSpan设置子元素的所在的行、列、跨的行数和跨的列数。
看一下Gird的DEMO:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Button Content="7"
Width="100"
Height="100"
Margin="0" />
<Button Grid.Column="1"
Content="8"
Width="100"
Height="100" />
<Button Grid.Column="2"
Content="8"
Width="100"
Height="100" />
<Button Grid.Column="3"
Content="/"
Width="100"
Height="100" />
<Button Grid.Row="1"
Content="4"
Width="100"
Height="100"
Margin="0" />
<Button Grid.Row="1"
Grid.Column="1"
Content="5"
Width="100"
Height="100" />
<Button Grid.Row="1"
Grid.Column="2"
Content="6"
Width="100"
Height="100" />
<Button Grid.Row="1"
Grid.Column="3"
Content="*"
Width="100"
Height="100" />
<Button Grid.Row="2"
Content="1"
Width="100"
Height="100"
Margin="0" />
<Button Grid.Row="2"
Grid.Column="1"
Content="2"
Width="100"
Height="100" />
<Button Grid.Row="2"
Grid.Column="2"
Content="3"
Width="100"
Height="100" />
<Button Grid.Row="2"
Grid.Column="3"
Content="-"
Width="100"
Height="100" />
<Button Grid.Row="3"
Grid.ColumnSpan="2"
Content="0"
Width="220"
Height="100"
Margin="0" />
<Button Grid.Row="3"
Grid.Column="2"
Content="."
Width="100"
Height="100" />
<Button Grid.Row="3"
Grid.Column="3"
Grid.RowSpan="2"
Content="+"
Width="100"
Height="220" />
<Button Grid.Row="4"
Grid.ColumnSpan="3"
Content="="
Width="340"
Height="100" />
</Grid>
效果如下:

在看一个GridLayout的DEMO:
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="5">
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button android:text="/" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="×" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="-" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="0" />
<Button android:text="." />
<Button
android:layout_gravity="fill"
android:layout_rowSpan="2"
android:text="+" />
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="=" />
</GridLayout>
效果图如下(和WP的Grid效果一样,但是GridLayout的子元素的行列可以不显示指定,GridLayout会根据行列数的设置和子元素所在的顺序自动确定它的行列,xml编码比较简洁):

由于TableLayout不能跨行,则布局上述的界面就要结合其他的布局容器才能完成了(而且用上了一些固定的宽高值,不推荐这样做):
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="-" />
</TableRow>
<TableRow>
<LinearLayout
android:layout_span="4"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="176dp"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="." />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="264dp"
android:layout_height="wrap_content"
android:text="=" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="96dp"
android:text="+" />
</LinearLayout>
</TableRow>
</TableLayout>
效果如下:

6.总结
Android的布局容器设计明显偏重于提供自适应的能力,即使是需要设置固定宽高的地方也已dp代替px为单位,或许是安卓众多的设备分辨率所逼迫的吧;
WinPhone的布局容器是从WPF再到Silverlight一路阉割来的,提供的布局方便性灵活性弱了不少,另外它也是不以px为布局单位的,xaml的手写体验比Android的布局xml要好一些。
IOS开发了解一些,它的布局是另外一个极端,严重依赖于像素,设备少嘛,就那几个分辨率,也完全不可能去手写xib文件,,,以前研究IOS开发的时候简直头疼的要死,很多情况还要用OC代码来做布局,呵呵哒;
总的来说,Android提供的布局容器比WinPhone要方便许多,功能和灵活性也能多一些,手写布局xml也完全可行(得益于Android Studio的智能提示做的还挺不错)。
由于笔者刚刚接触Android,文中难免会有不当或者错误之处,欢迎看官们指正。
1.[Andriod]之Andriod布局 VS WinPhone布局的更多相关文章
- 1.[WP Developer体验Andriod开发]之Andriod布局 VS WinPhone布局
0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个窝火啊,去你妹的兼容性,,, 最近体验下 ...
- 仿喜马拉雅实现ListView添加头布局和脚布局
ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- IOS开发之绝对布局和相对布局(屏幕适配)
之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...
- duilib各种布局的作用,相对布局与绝对布局的的意义与用法
大多数刚使用duilib的朋友时候非常依赖duilib自带的设计器,用他可以拖拉控件,可视化的做出自己想要的界面.可是用一段时间就会发现原带的设计器有很多bug,时不时会崩溃,支持的控件数量有限,属性 ...
- Qt之布局管理--基本布局
Qt提供的布局类以及他们之间的继承关系QLayout-----QGirdLayout | ---QBoxLayout----QHBoxLayout | --QVBoxLayout----------- ...
- FineUI第十四天---布局之垂直布局和水平布局
布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...
- webapp,liveapp: 流式布局和rem布局
liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...
- android布局 FrameLayout(帧布局)详解
看到一篇很有趣的文章对我就是冲着萌妹子看的 FrameLayout(帧布局) 前言 作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候 ...
随机推荐
- 自定义的jdbc连接工具类JDBCUtils【java 工具类】
JDBCUtils 类设计: 1. 创建私有的属性*(连接数据库必要的四个变量):dreiver url user password 2. 将构造函数私有化 3.将注册驱动写入静态代码块 4.外界只能 ...
- Java开发知识之Java中的泛型
Java开发知识之Java中的泛型 一丶简介什么是泛型. 泛型就是指泛指任何数据类型. 就是把数据类型用泛型替代了. 这样是可以的. 二丶Java中的泛型 Java中,所有类的父类都是Object类. ...
- Linux svn checkout时候总报设备上没有空间
详细报错信息:svn: 不能打开文件“weibosearch2.0.0/.svn/lock”: 设备上没有空间 但是df -h查看磁盘[root@picdata-1-2 data]# df -h文件系 ...
- SpringMVC集成rabbitmq:优化秒杀下单环节
前言 上一篇在springboot中基于自动配置集成了rabbitmq.那么回到最初的话题中就是想在秒杀下单环节增加排队机制,从而达到限流的目的. 优化秒杀下单流程 之前是在控制器里拿到客户端请求后直 ...
- Java多线程之---用 CountDownLatch 说明 AQS 的实现原理
本文基于 jdk 1.8 . CountDownLatch 的使用 前面的文章中说到了 volatile 以及用 volatile 来实现自旋锁,例如 java.util.concurrent.ato ...
- 常见MQTT服务器搭建[转载]
简介 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,它比较适合于在低带宽.不可靠的网络的进行远程传感器和控制设备通 ...
- mysql 错误 ERROR 1030 Got error 28 from
错误SQL 查询:编辑SHOWFULLFIELDSFROM`表`FROM`数据库`; MySQL 返回:#1030 - Got error 28 from storage engine 根据返回值,可 ...
- js正则表达式 数字和小数点 非负数 保留两位小数点
验证数字非负数 小数点保留两位小数点 下面正则已验证通过 /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
- C# System.Runtime.Caching使用
System.Runtime.Caching命名空间是.NET 4.0新增的,目的是将以前的.NET 版本中的System.Web.Caching单独提取出来,独立使用,这样web和其他.NET程序如 ...
- webpack入门教程--1
首先说什么是webpack:Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 然后因为webpack有不同的版本,所以 ...