webpack4 系列教程 十一 字型檔案處理

2021-09-11 09:12:19 字數 1871 閱讀 1383

本節課的**目錄如下:

本節課的package.json內容如下:

}複製**

為了提取 css 樣式到單獨檔案,需要用到extracttextplugin外掛程式。在專案的入口檔案需要引入style-loadercss-loader:

import "style-loader/lib/addstyles";

import "css-loader/lib/css-base";

import "./assets/fonts/iconfont.css";

複製**

借助url-loader,可以識別並且處理eotwoff等結尾的字型檔案。同時,根據字型檔案大小,可以靈活配置是否進行base64編碼。下面的 demo 就是當檔案大小小於5000b的時候,進行base64編碼。

// webpack.config.js

const path = require("path");

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

let extracttextplugin = new extracttextplugin();

module.exports = ,

output: ,

module: ,

use: []})

},}]}

]},

plugins: [extracttextplugin]

};複製**

按照上面的配置,打包好的cssjs均位於/src/dist/資料夾下。因此,需要在index.html中引入這兩個檔案(假設已經打包完畢):

複製**cmd中執行webpack進行打包,打包結果如下:

在 chrome 中開啟index.html,字型檔案被正確引入:

webpack4 系列教程 十一 字型檔案處理

本節課的 目錄如下 本節課的package.json內容如下 為了提取 css 樣式到單獨檔案,需要用到extracttextplugin外掛程式。在專案的入口檔案需要引入style loader和css loader import style loader lib addstyles import...

webpack4系列第四發

在webpack4中的hmr配置及其簡單,如下所示即可 const webpack require webpack module.exports src index.js 入口檔案 import style.css 這樣當我們的css檔案更新的時候,就會自動替換所更新的。需要注意的是,這裡css的自...

webpack4 系列教程 一 打包JS

webpack 本身就是為了打包js所設計,作為第一節,介紹怎麼打包js。webpack支援es6,commonjs,amd。建立vendor資料夾,其中minus.js multi.js和sum.js分別用 commonjs amd 和 es6 規範編寫。vendor 資料夾 位址 es6 imp...