WebpackでSlickを使用する際に、"slick-theme.scss"内で使用されている画像とフォントが読み込めない
内容
WebpackでjQueryのスライダー用ライブラリSlickを使用しているのですが、
slick-theme.scssをimportするとscss内で定義されている画像とフォントのパスが
localhostのドキュメントルートからのパスになってしまい404 Not Foundとなってしまいます。
現状回避策として、
htmlファイルに直接書きを記述することでslick-theme.cssのみWeb上から読み込んでいる状態です。
<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
│ └── ①detail.js(この中でslickをimport)
├── src
│ ├── entry.js
│ └── js
│ ├── _common.js
│ ├── detail.js
│ └── list.js
└── ②webpack.config.babel.js
①detail.js
// <[slick読み込み]===============================>
import 'slick-carousel';
import 'slick-carousel/slick/slick.scss';
import 'slick-carousel/slick/slick-theme.scss';
// <[slickerの設定]>============================>
$('.slider').slick({
dots: true,
centerMode: true,
centerPadding: '150px',
responsive: [
{
breakpoint: 767,
settings: {
centerMode: false
}
}
]
})
②webpack.config.js
'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: {
presets: [
['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.gif 404 (Not Found)
http://localhost:8080/detail/fonts/slick.woff
http://localhost:8080/detail/fonts/slick.ttf