Unable to load images and fonts used in "slick-theme.scss" when using Slick in Webpack

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

 [ProjectDirectory
├-- package.json
├-- public
│   -- --commons.js
│   -- --entry.js
│   -- -- detail
│   │ -- 1.html
│   --js
│       -- -- d detail.js (import click among them)
├-- src
│   -- --entry.js
│   --js
│       -- --_common.js
│       -- --detail.js
│       --list.js
└-- wwebpack.config.babel.js

//<[slick load]===============================>
import 'slick-carousel';
import'slick-carousel/slick/slick.scss';
import'slick-carousel/slick/slick-theme.scss';

// <Slicker Settings>============================>
$('.slider').slick({
  dots —true,
  centerMode: true,
  centerPadding: '150px',
  responsive:[
    {
      breakpoint: 767,
      settings: {
        centerMode: false
      }
    }
  ]
})

'use strict';
// <Origin==================================>
const
webpack=require('webpack'),
path=require('path'),
autoprefixer=require('autoprefixer'),
precss=require('precss')

// <Paths==================================>
const
src_path=path.resolve(__dirname, 'src',
dist_path=path.resolve(__dirname, 'public')

// <Plugins==================================>
const
CommonsChunkPlugin=new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: 'commons.js'
}),
jQuery=new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}),
NamedModulesPlugin=new webpack.NamedModulesPlugin(),
HotModuleReplacementPlugin=new webpack.HotModuleReplacementPlugin(),
LoaderOptionsPlugin=new webpack.LoaderOptionsPlugin({
  options: {
    postcss: [
      require('autoprefixer') ({
        browsers: ['last 2 versions' ]
      })
    ]
  }
})

// <ModuleRules=============================>
const
LOADER_ES6 = {
  test://\.js$/,
  include —src_path,
  use: [{
    loader: 'babel-loader',
    options: {
      presents: [
        ['es2015', {modules:false}]
      ]
    }
  }]
},
LOADER_SCSS = {
  test://\.(css|scss)$/,
  loader: ['style-loader', 'css-loader?-url', 'sass-loader', 'postcss-loader']
},
LOADER_OTHERS={
  test: / \. (eot | svg | woff | ttf | gif)$/,
  loader: 'url-loader'
}


// <CoreConfigs=============================>
const
config = {
  context —src_path,
  entry: {
    'entry': './entry.js',
    'js/list': './js/list.js',
    'js/detail': './js/detail.js'
  },
  output: {
    path —dist_path,
    publicPath: '/',
    filename: '[name].js'
  },
  module: {
    rules:[
      LOADER_ES6,
      LOADER_SCSS,
      LOADER_OTHERS
    ],
  },
  plugins: [
    jQuery,
    NamedModulesPlugin,
    HotModuleReplacementPlugin,
    CommonsChunkPlugin,
    LoaderOptionsPlugin
  ],
  devServer: {
    contentBase: dist_path,
    port —8080,
    inline —true,
    hot —true
  }
}

module.exports=config;

 http://localhost:8080/detail/ajax-loader.gif404 (Not Found)
http://localhost:8080/detail/fonts/slick.woff
http://localhost:8080/detail/fonts/slick.ttf