webpack入門 stylusのimportでのbackground-image

gulpからwebpackに乗り換えようと試しに環境作ってたら
stylusの@importしているfileでの画像pathではまったのでメモ

package

package.json

  "devDependencies": {
    "autoprefixer": "^6.4.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "postcss-loader": "^0.13.0",
    "precss": "^1.4.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.8.1",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }

webpack

webpack.config.js

import path from 'path'
import webpack from 'webpack'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import autoprefixer from 'autoprefixer';


const src  = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

export default {
    devtool: 'source-map\',

    entry: src + '/js/index.jsx',

    output: {
        path: dist,
        filename: 'js/bundle.js',
        publicPath: 'http://localhost:3000/'
    },

    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
            {
                test: /\.styl$/,
                loader: ExtractTextPlugin.extract('style-loader','css-loader?sourceMap!postcss-loader!resolve-url!stylus-loader')
            },

            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader'

            }
        ]
    },

    postcss: [ autoprefixer( { browsers: ['IE 9', 'IE 10', 'IE 11', 'last 2 versions'] } )],

    devServer: {
        contentBase: 'dist',
        port: 3000
    },

    resolve: {
        extensions: ['', '.js', '.jsx', 'stylus'],
        alias: {
            images: path.join(__dirname, 'dist/img')
        }
    },

    plugins: [
        new ExtractTextPlugin("./css/app.css"),

        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: true
            }
        })
    ]
}

ディレクトリ

• src
  • img
    • test1.png
    • test2.png
  • styles
    • app.styl
    • component
      • header.styl
  • js
    • index.jsx

app.stylでの読み込みはうまく行ってたのだが
background url('../img/test.png')

app.stylにimportしているcomponent/header.styl内で
background url('../../img/test.png')

と書くと
Module not found: Error: Cannot resolve 'file' or 'directory'
ってエラーが出てうまくいかない

この辺参考に

resolve-url-loader
っての使って
background url('img/test.png')

で書き出すことが出来た。

imagesをdata-uriにしたくない時は
loader: 'url-loader?limit=10000&name=img/[name].[ext]
loaderを変えると実際のパスが入る。
この辺はfile-loaderを使ったほうがよいって記事もみたけどどうなんだろ。