webpack@1.15下url-loader的limit屬性無效

　　    最近在學習過程中發現了一個url-loader的坑，特此記錄一下：

• webpack版本1.15，url-loader版本是1.1.2,webpack.config.js配置如下：

module: {
        loaders: [
            {
                test    : /\.css$/, 
                loader  : ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            
            {
                test    : /\.(gif|png|jpg|woff|svg|ttf|eot)\??.*$/,    //匹配正則     
                loader  : 'url-loader',                                           //使用的loader     
                options : {                                                       
                    limit: 100,                            //小於100bit的將會被轉成base64
                    name : 'resource/[name].[ext]'   //圖片打包的路徑
                }
            }
        ]
    }                                    

• 按照以上配置打包的話，css代碼中url引用以上后綴名的文件的話應該會被打包進發布目錄的/resource/文件下才對啊

　　目錄結構：

                  

　　css文件：

　　

body{
    background: url(../../image/test.jpg) no-repeat center;　　//test.jpg 200kb
};

• 運行webpack打包測試:

　　　　

• 打包沒報錯，但是limit貌似無效，打開css文件

 　　

• 好吧還是給轉成base64了，查了多方資料無果，於是想會不會是版本不兼容的問題，畢竟安裝webpack的時候指定安裝1.15版本，而裝url-loader的時候可沒指定，
• 於是卸載url-loader

 

npm uninstall url-loader --save-dev

• 裝兩年前的版本總行了吧

npm install url-loader@0.5.9 --save-dev

• loader配置寫法換成以前的形式：

{
                test    : /\.(gif|png|jpg|woff|svg|ttf|eot)\??.*$/, 
                loader  : 'url-loader?limit=100&name=resource/[name].[ext]'
}

• 執行webpack打包：

　　　　

• 為驗證limit生效，把limit值改為100000，刪除dist打包：

　　　　

• 嗯，看起來問題是解決了。