基於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(沒用到,提早放個坑位之後學習)

​

​