weboack5webpack5用url-loader(file-loader)处理字体
2024-10-21 17:44:08
file-loader(url-loader)可以用解析打包字体。
webpack配置loader
\\ webpack.config.js
const webpack = require("webpack");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin"); // 生成.html文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 把样式提取为单独的css文件 的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除构建目录的插件
module.exports = {
entry: "./src/main.js", // 打包入口文件
mode: "development", // 使用开发模式
devServer: {
// 本地服务器代理
contentBase: path.join(__dirname, "dist"), //指定在哪个目录下找要加载的文件
compress: true,
port: 8080, // 配置端口
hot: true, // 配置热更新
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
ignoreOrder: false,
}),
new htmlWebpackPlugin({
favicon: "./public/favicon.ico",
filename: "index.html",
template: "./public/index.html",
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"], // 处理css的loader
},
{
//解析字体
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: "file-loader", // url-loader 也可以用来解析字体
},
],
},
output: {
path: path.join(__dirname, "dist"),
filename: "app.[hash:16].js",
publicPath: "/", // 也可以用来处理路径问题，加在所有文件路径前的根路径
},
};
配置loader的demo https://github.com/cisbest/webpack5-demo-font
最新文章
- javascript-桥接模式
- 【C语言学习】《C Primer Plus》第8章 字符输入/输出和输入确认
- TortoiseSVN 版本回滚
- 低配置电脑播放 flash 视频时 占 cpu 资源过高的解决方法
- Python 变量 对象 引用
- 正则匹配<img src="xxxxxx" alt="" />标签的相关写法
- Linux学习：find、chmod、ps命令
- 先对数组排序，在进行折半查找（C++）
- Python爬虫学习之获取网页源码
- C语言基础 - 实现动态数组并增加内存管理
- springboot入门_helloworld
- PHP - curl实现采集
- [SCOI2016]幸运数字
- mxGraph进阶(一)mxGraph教程-开发入门指南
- day02 进制之间的转换and计算机编码叙述
- cf 1132 F
- python-策略模式
- 为你的网站加上SSL，可以使用HTTPS进行访问
- ssm多数据源的操作
- chrome 中for-in 在遍历对象时的顺序问题