5.webpack 打包字体图标

以打包字体图标为例

• 使用的loader：file-loader
• 图标库是阿里图标库下载的

1. 下载file-loader (还需要安装html-webpack-plugin，css-loader, style-loader)

   npm i file-loader -D
   

2. 创建入口文件(src/index.js)并引入图标库的入口文件

   import './css/iconfont.css'
   

3. 创建模板文件(src/index.html)

   <p class="iconfont icon-shang"></p>
   <p class="iconfont icon-suo"></p>
   <p class="iconfont icon-suo1"></p>
   

4. 配置webpack的配置文件webpack.config.js

   const path = require('path');
   
   
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   
   
   
   module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
   filename: './built.js',
   path: path.resolve(__dirname, 'build')
   },
   module: {
   rules: [{
   test: /.css/</span><span class="token punctuation">,</span>
                   use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span>
               <span class="token punctuation">}</span><span class="token punctuation">,</span>
               <span class="token punctuation">{<!-- --></span>
                   <span class="token comment">//test表示匹配，explode表示排除</span>
                   exclude<span class="token punctuation">:</span> <span class="token regex">/\.(css|js|html)/,
   loader: 'file-loader'
   }
   ]
   },
   plugins: [
   new HtmlWebpackPlugin({
   template: './src/index.html'
   })
   ]
   }
   
   
   

5. 打包

   webpack
   

6. 在输出文件夹build中可以看到index.html文件然后运行