react项目引入字体 (font-awsome)

webpack.config.js

const path = require("path");

const htmlPlugin = require("html-webpack-plugin");

module.exports = {

entry: "./src/index.js",

output: {

filename: "bundle.js",

path: path.join(__dirname, "dist")

},

plugins: [

new htmlPlugin({

template: "./index.html"

})

],

module: {

rules: [

{

test: /(\.jsx|\.js)$/,

exclude: /node_modules/,

loader: "babel-loader",

options: {

presets: ["env", "react"]

}

},

{

test: /\.css$/,

loader: "style-loader!css-loader"

},

{

test: /\.(png|jpe?g|gif|svg|jpg|gif)(\?.*)?$/,

loader: "url-loader",

options: {

limit: 10000

}

},

{

test: /\.(ttf|eot|woff|woff2|svg)$/,

use: ["file-loader"] //1.把你的资源移动到输出目录2.返回最终引入资源的url

}

]

},

devServer: {

open: true,

port: 9000

}

};

 

 

index.js

import React from "react"

import ReactDOM from "react-dom"

import styles from "./styles.css"

import dog from "./common/a.jpg"

import 'font-awesome/css/font-awesome.css';

const ab=require("./common/3.jpg")

ReactDOM.render(

<div>

<div className='fa fa-rocket'>React</div>,

</div>,

document.getElementById("root")

)

 

package.json

{

"name": "testdemo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"build": "webpack",

"start": "webpack-dev-server"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"css-loader": "^2.1.1",

"file-loader": "^3.0.1",

"html-webpack-plugin": "^3.2.0",

"style-loader": "^0.23.1",

"url-loader": "^1.1.2",

"webpack": "^4.29.6",

"webpack-dev-server": "^3.2.1"

},

"dependencies": {

"babel-core": "^6.26.3",

"babel-loader": "^7.1.5",

"babel-preset-es2015": "^6.24.1",

"babel-preset-react": "^6.24.1",

"font-awesome": "^4.7.0",

"react": "^16.8.4",

"react-dom": "^16.8.4"

}

}