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

KeJX
449 阅读3分钟

个人练习项目总结...

项目演示

mK0swF.gif

已经开源在 我的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(没用到,提前放个坑位以后学习)

​

​

avatar
文章
阅读
粉丝