Webpack4(五) webpack打包iconfont

webpack 打包 iconfont

(一) 把下载好的 iconfont 自己文件放到 src 目录下面新建的 font 目录下

• 然后修改里面引入文件的的引入路径

(二) 在 index.js 里面写

var root = document.getElementById('root')

import './index.scss'

root.innerHTML = '<div class="iconfont icon-delete"></div>'

(三) 修改 webpack.config.js 里面的文件

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.(eot|ttf|svg))$/, //加载字体文件验证
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },

      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(4)然后在执行打包命令

npx webpack