webpackでscssをapp.jsにimportしているのだが、background-imageで背景画像を設定したときにパスが絶対パスになってしまい困った話

ニカケルのコーポレートサイト作成で開発環境をwebpack使ってるのだが表題の件でハマった。

前提条件

webpackを使用するにあたって、
画像ファイルまでデータ化してjsでimportするのが嫌だった。
使用する画像を全てimportするのが逆にだるくね?って思った。
(いい感じのやり方あれば教えて頂きたいです)

ディレクトリ構造

nikakeru
├── package.json
├── public
│   ├── app.bundle.js
│   ├── commons.js
│   ├── contact.bundle.js
│   ├── contact.html
│   ├── images
│   │   ├── handshake.png
│   │   ├── illust_saito.png
│   │   ├── illust_seki.png
│   │   ├── pc_sp.png
│   │   ├── report.png
│   │   └── report01.png
│   └── index.html
├── src
│   ├── app.js
│   ├── contents
│   │   ├── about.js
│   │   ├── contact.js
│   │   ├── member.js
│   │   ├── services.js
│   │   └── top.js
│   ├── html
│   │   ├── about.html
│   │   ├── member.html
│   │   ├── services.html
│   │   └── top.html
│   ├── modules
│   │   ├── contents_judge.js
│   │   └── menu.js
│   └── scss
│       ├── about.scss
│       ├── common.scss
│       ├── header.scss
│       ├── member.scss
│       ├── reset.scss
│       ├── services.scss
│       └── top.scss
└── webpack.config.js

webpack.config.js

// <[Origin]==================================>
const webpack = require('webpack'),
  path = require('path'),
  glob = require('glob')

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


// <[Plugins]==================================>
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: 'commons.js'
})


// <[ModuleRules]=============================>
const RULE_ES6 = {
  test: /\.js$/,
  include: src_path,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: [
        ['es2015', {modules: false}],
      ]
    }
  }]
},
RULE_HTML = {
  test: /\.html$/,
  loader: 'html-loader'
},
RULE_SCSS = {
  test: /\.scss$/,
  loader: ['style-loader', 'css-loader?-url', 'sass-loader']
}

// <[CoreConfigs]=============================>
const config = {
  context: src_path,
  entry: {
    'app': './app.js',
    'contact': './contents/contact.js'
  },
  output: {
    path: dist_path,
    publicPath: '/public/',
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      RULE_ES6,
      RULE_HTML,
      RULE_SCSS
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    extractCommons
  ]
}

module.exports = config;

原因

RULE_SCSSの中でscssをjsで読める形にしてくれるcss-loaderというのを使っているのだが、
ここの設定が足りていなかった。

webpackのローダー(jsが読める形にしてくれる君)は、
css-loader?-urlのようにパタメータ付与することで追加の設定が可能とのこと。

今回は-urlを付与することでscssビルドの際にパスがチェックされいい感じに変更されるのを止めた形になる。
(正直Gulpからwebpackに乗り換えたばかりでwebpackのこと良う分からん。取り敢えず2割くらいは理解した。)

参考サイト

ありがとう御座いました。 助かりました。

qiita.com

qiita.com