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$/,
                   use: ['style-loader', 'css-loader']
               },
               {
                   //test表示匹配，explode表示排除
                   exclude: /\.(css|js|html)$/,
                   loader: 'file-loader'
               }
           ]
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html'
           })
       ]
   }
   

5. 打包

   webpack
   

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