title: webpack working with font
body: <p>I am trying to use webpack2 with express, and I just can't seem to make my font served, js file works fine,  please,help
  this is my webpack.config</p>
  
  <pre><code>const devConfig = {
  devtool: '#source-map',
  entry: [
      './public/js/entry.js',
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client'
  ]
  ,
  output: {
      filename: './js/main.js',
      path: '/',
      publicPath: publicPath
  },
  plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
      rules: [
          {
              test: /\.s(a|c)ss$/,
              use: [{
                  loader: "style-loader" // creates style nodes from JS strings
              }, {
                  loader: "css-loader" // translates CSS into CommonJS
              }, {
                  loader: "sass-loader" // compiles Sass to CSS
              }]
          },
          {
              test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
              loader: 'file-loader?'
          }
      ]
  }
  </code></pre>
  
  <p>};</p>
  
  <p>and inside my scss file, I have this</p>
  
  <pre><code>src: url('../font-files/firasans-extralightitalic-webfont.woff2') format('woff2'), url('../font-files/firasans-extralightitalic-webfont.woff') format('woff');
  </code></pre>
  
  <p>}
  and my path structure
  <a href="https://i.stack.imgur.com/k4Bi5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k4Bi5.png" alt="enter image description here"></a></p>
  
  <p>while I keep getting this error</p>
  
  <p>Module not found: Error: Can't resolve '../font-files/firasans-extralightitalic-webfont.woff2' </p>
  
  <p>can anyone tell me what's wrong...I see some others add there fonts in js file, but I really don't like do it that way</p>