基于webpack的组件化pc电商首页项目总结

我的练习项目总结...

项目演示

已经开源在 个人github

坑

写这个栏目的目的主要是方便之后本身回头回顾和深刻学习一下每一块东西...

webpack相关

一.引入iconfont文件

@font-face {
   /*原来的iconfont.css文件*/
   font-family: "iconfont";  
   src: url("font/iconfont.eot?t=1565168052702"); /* IE9 */
   src: url("font/iconfont.eot?t=1565168052702#iefix") format('embedded-opentype'), /* IE6-IE8 */
   url("font/iconfont.woff?t=1565168052702") format('woff'),
   url("font/iconfont.ttf?t=1565168052702") format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
   url("font/iconfont.svg?t=1565168052702#iconfont") format('svg'); /* iOS 4.1- */
}
复制代码

@font-face {
    /*引入在webpack项目中的iconfont须要改动的部分: 1.有个woff2的部分因为webpack出现了错误我干脆就直接移除了 2.url中的引号须要去掉,而且将路径改为项目中的相对路径 */
    font-family: "iconfont";
  	src: url(../font/iconfont.eot?t=1566020851286); /* IE9 */
  	src: url(../font/iconfont.eot?t=1566020851286#iefix) format('embedded-opentype'), /* IE6-IE8 */
  	url(../font/iconfont.woff?t=1566020851286) format('woff'),
  	url(../font/iconfont.ttf?t=1566020851286) format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  	url(../font/iconfont.svg?t=1566020851286#iconfont) format('svg'); /* iOS 4.1- */
}

复制代码

二.建立static文件夹

​ 在项目过程当中因为要用到读取本地的json文件,可是因为webpack打包以后路径会更改的缘由会致使路径的书写变得异常困难,因而便想到和vue-cli同样建立一个不会被处理的static文件夹，而且在配置中设置一下别名，方便本身的引用。

内容来源

1.安装插件

cnpm install --save-dev copy-webpack-plugin

建议原来一直使用cnpm就用cnpm,用npm就用npm,不然好像会形成错误

2.在项目下新建一个文件夹用于存储不想被编译的文件夹

3.修改webpack配置文件

//webpack.config.js
// 在头部引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin');


// 在plugins配置数组中添加一项
plugins: [
    new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, './static'),//__dirname 相对于配置文件存在目录的母文件夹,例如我是pathname/webpack.config.js的话,__dirname:pathname
                to: 'static',//打包后的文件夹输出名称
                ignore: ['.*']// 忽略打包文件的后缀名,此处都忽略
            }
     ])
]
复制代码

5. 注意事项

static目录下的文件不可经过require或者import的方式引入文件，不然该文件就会参与打包。能够经过http请求静态资源的方式

三.设置别名

设置别名更方便咱们对地址的引用(不用去思考对引用文件的相对位置了)

内容来源

//webpack.config.js
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve('dist')
    },
    resolve: {
        // 设置别名
        alias: {
            '@': resolve('src')// 这样配置后 @ 能够指向 src 目录 注意文件与上文__dirname的相对路径关系
        }
    }
};
复制代码

program (至关于__dirname) 
├── asrc
│   └── -static   // 'static': resolve('src/static')
├── webpack.config.js
复制代码

设置完成以后就能在js文件中直接使用绝对的地址了 import "static/your filename"

一些技巧

1.隐藏文字,seo优化

因为搜索引擎会根据你的标签抓取内容,因此用到一些语义化的标签会更方便搜索引擎的抓取,可是可能咱们须要用语义化例如<h1>的标签,可是不但愿它在页面中出现,取而代之是一个logo图片,咱们就能够把这个文字隐藏起来

<h1><a href="./index.html" class="logo fl text-hidden">淘淘网</a></h1>
复制代码

/* 文字隐藏*/
.text-hidden{
    text-indent: -9999px;
    overflow: hidden;
}
复制代码

2. 行内元素出现小间距的问题

间隔的行内元素之间常常会出现之间会有间距的状况。

​ 缘由：因为html文件中标签之中常常会有空格或者回车的状况下，浏览器会将其也解析成须要空间的字符。

​ 解决方法：

1. //不留间隙
   <a>摸摸大</a ><a>你好</a>
   复制代码

2. 使用浮动

3. 包裹的父元素中的font-size设置为负值,里面的元素设置为0

3. 页面启动的优化手段

1. 按需加载(当其须要显示的时候再加载其中的数据)
2. 缓存数据到本地(注意数据有效时间)
3. cdn
4. ssr(没用到,提早放个坑位之后学习)

​

​