Web前端 - webpack 打包图片

建立daichen.css文件

div{
    color:red;
    height: 800px;
    background: url(./../m.jpg);
}

在html文件中正常引用link 背景正常显示。

此时使用webpack打包，出现错误！

安装插件：

npm install url-loader

设置配置：

{ 

    test: /\.(png)|(jpg)$/,

    loader: "url?limit=50000"

}

module.exports = {
    entry:[
    './es2015/index.js'//代表入口(总)文件 ，可以写多个。
    ],
    output: {
        path: './es2015/',  //输出文件夹
        filename:'index-webpack.js'   //最终打包生成的文件名
    },

    //引用外部加载器
    module: {
         loaders: [
             {
                test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用 下面的loader
                loader: 'babel',
                query:{
                    presets:['es2015']
                }
             },

             {
                 test: /\.css$/,
                 loaders: ['style', 'css'],
             },
             { 

                test: /\.(png)|(jpg)$/,

                loader: "url?limit=50000"

             }

            ]
    }
}

limit参数，代表如果 小于大约50K 则会自动帮你压缩成base64编码的图片

命令：webpack 正常！