国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack4 系列教程(十一):字體文件處理

UnixAgain / 1661人閱讀

摘要:或者來我的小站看更多內(nèi)容課程介紹和資料本節(jié)課源碼所有課程源碼本節(jié)課的代碼目錄如下本節(jié)課的內(nèi)容如下準備字體文件和樣式如上面的代碼目錄所示,字體文件和樣式都放在了目錄下。編寫按照上面的配置,打包好的和均位于文件夾下。

教程所示圖片使用的是 github 倉庫圖片,網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十一):字體文件處理》原文地址。或者來我的小站看更多內(nèi)容:godbmw.com
0. 課程介紹和資料

>>>本節(jié)課源碼

>>>所有課程源碼

本節(jié)課的代碼目錄如下:

本節(jié)課的package.json內(nèi)容如下:

{
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.1"
  }
}
1. 準備字體文件和樣式

如上面的代碼目錄所示,字體文件和樣式都放在了/src/assets/fonts/目錄下。點我直接下載相關(guān)文件

2. 編寫入口文件

為了提取 css 樣式到多帶帶文件,需要用到ExtractTextPlugin插件。在項目的入口文件需要引入style-loadercss-loader:

// app.js
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";

import "./assets/fonts/iconfont.css";
3. 處理字體文件

借助url-loader,可以識別并且處理eotwoff等結(jié)尾的字體文件。同時,根據(jù)字體文件大小,可以靈活配置是否進行base64編碼。下面的 demo 就是當文件大小小于5000B的時候,進行base64編碼。

// webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
  filename: "[name].min.css",
  allChunks: false
});

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: "style-loader"
          },
          use: [
            {
              loader: "css-loader"
            }
          ]
        })
      },
      {
        test: /.(eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 5000, // fonts file size <= 5KB, use "base64"; else, output svg file
              publicPath: "fonts/",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [extractTextPlugin]
};
4. 編寫index.html

按照上面的配置,打包好的cssjs均位于/src/dist/文件夾下。因此,需要在index.html中引入這兩個文件(假設(shè)已經(jīng)打包完畢):





  
  
  
  Document
  



  
5. 結(jié)果分析和驗證

CMD中運行webpack進行打包,打包結(jié)果如下:

在 Chrome 中打開index.html,字體文件被正確引入:

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/98258.html

相關(guān)文章

  • webpack-demos:全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要:全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個人技術(shù)博客。所以我花費了個多月整理了這份教程,一共分成節(jié),每節(jié)都有講解,并且準備了配套代碼。奈何深感水平不夠,只有一腔熱情,所以直接開放了教程和源碼。 webpack-demos:全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個人技術(shù)博客:godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享!開源教程(webpack、設(shè)計模式)、面試刷題(偏前...

    LMou 評論0 收藏0
  • webpack4 系列教程: 前言

    摘要:課程地址全部課程地址立即進入課程源碼目錄截至按照知識點,目錄分成了個文件夾之后還會持續(xù)更新。個人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時,最近內(nèi)容請看:https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的幫助下,開發(fā)者可以輕松地實現(xiàn)加密代碼、多平臺兼容。而最重要的...

    DevWiki 評論0 收藏0
  • webpack4系列教程(十):總結(jié)

    摘要:傳送門系列教程一初識系列教程二創(chuàng)建項目,打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天,我們需要一個工具來幫助我們管理項目資源,打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音,我的博文只...

    hqman 評論0 收藏0
  • webpack4 系列教程(六): 處理SCSS

    摘要:只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉庫圖片,網(wǎng)速過慢的朋友請移步原文地址系列教程六處理。根據(jù)規(guī)則放在最后的首先被執(zhí)行。 這節(jié)課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內(nèi)容 >>> >>> 本節(jié)課源碼 >>> 所有課程源碼 教程所示圖片使用的是...

    馬龍駒 評論0 收藏0
  • webpack4 系列教程(十三):自動生成HTML文件

    摘要:作者按因為教程所示圖片使用的是倉庫圖片,網(wǎng)速過慢的朋友請移步系列教程十三自動生成文件原文地址。編寫配置文件老規(guī)矩,是在這個選項中配置的。更多資料文檔文檔系列教程十三自動生成文件原文地址 作者按:因為教程所示圖片使用的是 github 倉庫圖片,網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十三):自動生成 HTML 文件》原文地址。更歡迎來我的小站看更多原創(chuàng)內(nèi)容:godbmw.co...

    superw 評論0 收藏0

發(fā)表評論

0條評論

UnixAgain

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<