webpack 3.X学习之图片处理

CSS中图片处理

在src目录下新建一个images目录，把图片放入images文件夹中；在index.html文件中增加一个div标签：

/src/index.html:

<div id="image"></div>

编写css,给刚刚增加的div标签添加背景图片：

/src/css/index.css:

#image{
    background: url('../images/webpack.jpg');
    width: 497px;
    height: 270px;
}

安装loader:

npm install --save-dev file-loader url-loader

在webpack.config.js中配置loader：

module:{
    rules:[
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{
                    limit:500000，
                    outputPath:'images/'
                }
            }]
        }
    ]
}

url-loader与file-loader

file-loader：解决引用路径的问题；

url-loader：如果图片较多，会发很多http请求，降低页面性能，url-loader将引入的图片编码，生成dataURL；url-loader会提供一个limit参数（单位B），小于limit字节的图片会被转为dataURL，大于limit的会使用file-loader进行copy；outputPath是图片分离后的路径；

简单说两者关系，url-loader封装了file-loader，url-loader不依赖file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader；

CSS中图片路径处理

利用extract-text-webpack-plugin插件将CSS文件分离出来，但是CSS里的图片路径并不正确，这里使用publicPath解决；

publicPath是在webpack.config.js文件的output选项中，主要作用是处理静态文件路径的；

声明一个website对象：

const website = {
    publicPath:'http://localhost:1608/'
}

这里的IP和端口，必须和devServer配置的IP和端口一致。

配置output选择：

output:{
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: website.publicPath
}

HTML中图片处理

在webpack中是不喜欢你使用标签<img>来引入图片的，但是作前端特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。

安装loader：

npm install --save-dev html-withimg-loader

在webpack.config.js中配置loader:

module:{
    rules:[
        {
            test:/\.(htm|html)$/,
            use:["html-withimg-loader"]
        }
    ]
}

参考地址：

• https://github.com/zhuangZhou/webpack_demo
• http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel