webpack -- 图片和bootstrap字体安装使用

1、安装插件

cnpm i url-loader file-loader --save-dev

2、webpack.config.js（字体一起添加了）

 module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, 
      { test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}//字体
        
    ]
  }

3.图片就可以显示了

4.字体（直接装open-iconic和bootstrap应该也行）

cnpm i bootstrap -S
cnpm i https://github.com/iconic/open-iconic.git -D

5、main.js中添加

import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

字库地址：https://useiconic.com/open#icons

      <span class="oi oi-name"></span>
      <span class="oi oi-warning"></span>