Font Awesome Webpack 使用教程

Font Awesome Webpack 使用教程

font-awesome-webpackfont-awesome package for webpack项目地址:https://gitcode.com/gh_mirrors/fo/font-awesome-webpack

1. 项目的目录结构及介绍

font-awesome-webpack/
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── font-awesome-webpack.js
│   └── styles/
│       └── font-awesome.config.js
├── examples/
│   ├── basic/
│   │   ├── app.js
│   │   ├── index.html
│   │   ├── package.json
│   │   └── webpack.config.js
│   └── scss/
│       ├── app.js
│       ├── index.html
│       ├── package.json
│       └── webpack.config.js
└── node_modules/

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• src/: 源代码目录。
  • font-awesome-webpack.js: 主要入口文件。
  • styles/: 样式配置文件目录。
    • font-awesome.config.js: Font Awesome 样式配置文件。
• examples/: 示例目录，包含基本示例和 SCSS 示例。
  • basic/: 基本示例目录。
    • app.js: 示例应用入口文件。
    • index.html: 示例页面文件。
    • package.json: 示例项目依赖配置文件。
    • webpack.config.js: Webpack 配置文件。
  • scss/: SCSS 示例目录，结构与 basic/ 类似。
• node_modules/: 项目依赖模块目录。

2. 项目的启动文件介绍

项目的启动文件主要是 src/font-awesome-webpack.js，该文件是 Font Awesome 与 Webpack 集成的入口文件。其主要功能是加载和配置 Font Awesome 样式。

// src/font-awesome-webpack.js

var path = require('path');
var loader = require('sass-loader');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  loaders: [
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader'
    }
  ],
  styleLoaders: [
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
    }
  ]
};

3. 项目的配置文件介绍

项目的配置文件主要是 examples/basic/webpack.config.js 和 examples/scss/webpack.config.js，这两个文件分别用于配置 Webpack 以支持基本示例和 SCSS 示例。

基本示例配置文件

// examples/basic/webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fontAwesomeWebpack = require('../../src/font-awesome-webpack');

module.exports = {
  entry: './app.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      ...fontAwesomeWebpack.loaders
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

SCSS 示例配置文件

// examples/scss/webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fontAwesomeWebpack = require('../../src/font-awesome-webpack');

module.exports = {
  entry: './app.js',
  output: {
    path: path

font-awesome-webpackfont-awesome package for webpack项目地址:https://gitcode.com/gh_mirrors/fo/font-awesome-webpack