webpack入門 stylusのimportでのbackground-image

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

###package
```json: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
```js: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'
ってエラーが出てうまくいかない

http://stackoverflow.com/questions/33450953/webpack-stylus-loader-incorrectly-resolve-url-paths

http://stackoverflow.com/questions/35786100/unable-to-resolve-absolute-url-paths-for-background-images-in-css-with-webpack

この辺参考に

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

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

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