今天完成的事情：

    使用webpack4.0将任务3的画面打包完成，并提交至GIT

明天计划的事情： 

  1. 完成任务4

  2. 练习怎么将代码写在SRC中的JS，并且顺利引用

  3. 练习JAVASCRIPT

遇到的问题：

  Q1:

    在目前现有的教程里，因为webpack的版本不停的提升，而造成看学习文件照做时会产生很多冲突

  A1:

    通过编译时回馈的信息查找资料，并都已解决。

    还有编写时路径要特别注意，不然很多档案都无法顺利引入。

  Q2: 

    SVG图片无法打包

  A2: 

    可照著以下方式修改（粗体字是资料相应位置，操作完后再次打包即可成功）

    webpack.dev.js

    {

        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

        use: [

            {

                loader: 'file-loader',

                options: {

                    outputPath: 'images/',  //打包后的图片放到images文件夹下

                }

            }

        ]

    },

    src/main.js

    import svgContent0 from './images/logo-0.svg';

    import svgContent1 from './images/logo-1.svg';

    import svgContent2 from './images/logo-2.svg';

  Q3: 

    在要打包的html当中引入<img src="./images/logo-0.png"/>

    可以引用，但是图片无法显示

  A3: 

    尚未解决，找到的资讯都是解决图片链接以及svg的图党最后使用js档案读取并写入至页面的DOM中

    直接引用的方法还未解决，图片仍是无法看见，最后只好改以PNG的图片方式引入页面当中

收获：

    此次的画面使用两次max-wedth的方式，也在这个项目当中应用到初步的less方法撰写css，

    为了返回功能钮，此次也在按钮上添加了onclick="window.history.go(-1)"使点击后回回到上个历史页面。

    因为画面中的文字大小没有特大，所以此次没有使用rem方式让页面的文字随浏览器宽度响应。

    如果要响应的话，因为此次的设计稿是使用320宽度的画面设计，所以也要以320的尺寸危基准等比例的调整大小。

    若使用flexible.js的话尺寸比照rem的方式为 rem = 设计稿宽度/(px的大小/100*10)

    移动端的设计稿若是640或750宽度的比例要做到良好的适应要在320尺寸做断点，

    因为此画面为最小手机，容易在画面适应下来的时候文字变得过小。

   calc为css中的计算方法，padding、margin、width等都能够使用

    如要加减可以的写法：calc(100% - 10px) 。

    加减的比例可以用百分比、px等目前常用的计算单位，rem也是可使用的单位之一。

    图片的话，如果是icon类型，且无渐层等色的话则是使用svg为最佳，因为svg的大小比jpg或是png都小。

    将图片转为WebP的格式的话会更小，不过WebP的格式一般支持在比较新的浏览器。

    版本较低的网站会无法间容。

    em会继承父级元素的字体大小，所以会变动。

    rem则是继承根元素的大小，只会随著html中的font-size变动而变动。

    px如果使用的话则需在各个尺寸都要进行适配，会花很多调整时间。但如果字体大小很小的话可用此单位做设定，具体因实际需求使用。

    在这几次实战后最终使用rem搭配px的方式进行

    PSCC切图的话只要选择好要裁切的图层，在图层上右键快速导出为PNG即可，

    如果要导出为其他格式则选择为导出为，但如果图片有经过设计修改，但尺寸必须要求跟之前相同的话，需请设计倒出时不能使用快速导出。

    因为快速导出时如果图片有更改，它导出时会截除宽度中的透明位置，所以图像大小会有所改变。

参考链接：

    智图网（WebP压缩）：https://zhitu.isux.us/

    CSS浏览器间容查找：https://caniuse.com/#search=position%3A%20sticky

    线上图片压缩：https://tinyjpg.com/

    webpack使用（具体会遇到的问题需自行练习后查找）：https://www.jianshu.com/p/6712e4e4b8fe