webpack之字體圖標引入

font-awesome官網

 

1 下載font-awesome包

cnpm i -S font-awesome

2配置webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={//node.js語法導出一個對象
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'dist'),//絕對路徑
        filename:'main.js',
    },
    plugins:[//生成html
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'src/index.html'
        })
    ],
    module:{
        rules:[{
                test:/\.js$/,
                use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['react']
                    }
                },]},
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.(jpg|png|gif|jpeg)$/,
                    use:[{
                        loader:'url-loader',
                        options:{
                            limit:20000
                        }
                    }]
                },
                {
                    test:/\.(ttf|eot|woff|woff2|svg)$/,
                    use:['file-loader']//1.把你的資源移動到輸出目錄2.返回最終引入資源的url
                },
        ]
    },
    devServer:{
        open:true,//自動打開服務器首頁
        port:9000,
        inline:true,
    }
}

3.引用

import  React    from  'React';
import  ReactDOM from  'react-dom';
import 'font-awesome/css/font-awesome.css';

ReactDOM.render(
    <div className='fa fa-rocket'>React</div>,
    document.getElementById('cdd')
);

 

4.運行查看

cnpm run dev