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

本節課的**目錄如下：

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

}複製**

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

import "style-loader/lib/addstyles";

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

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

複製**

借助url-loader，可以識別並且處理eot、woff等結尾的字型檔案。同時，根據字型檔案大小，可以靈活配置是否進行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]
};複製**

複製**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...