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"]

        }

    ]

}

参考地址：

巴特西

webpack 3.X学习之图片处理

CSS中图片处理

url-loader与file-loader

CSS中图片路径处理

HTML中图片处理

最新文章

热门文章