说明
玩转webpack课程学习笔记。
解析字体
1、安装依赖
npm i file-loader -D
file-loader 也可以用于处理字体。（图片跟字体都不是代码文件）
2、search.less 引入自己喜欢的字体，比如：
SourceHanSerifSC-Heavy.otf
@font-face{ font-family: 'SourceHanSerifSC-Heavy'; src: url('./fonts/SourceHanSerifSC-Heavy.otf') format('truetype'); } .search-text { font-size: 48px; color: green; font-family: 'SourceHanSerifSC-Heavy'; }
3、search.js
import React from 'react'; import ReactDOM from 'react-dom'; import './search.less'; import cxk from './images/cxk.jpg'; console.log(cxk); class Search extends React.Component { render() { return <div className="search-text"> 凯小默的博客 <img src={ cxk } /> </div> } } ReactDOM.render( <Search/>, document.getElementById('root') )
4、webpack.config.js配置
const path = require('path'); module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'production', module: { rules: [ { test: /.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' } ] } };
5、浏览器打开index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> <script src="./search.js"></script> </body> </html>
