复习webpack4之图片打包

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.图片打包

熟悉webpack配置的前端都知道，loader是webpack用来处理非js文件的，现在我们要在js文件中引入一张图片。

直接引入是肯定不行的，需要在webpack.config.js中配置 file-loader，别忘了要 npm install file-loader -D。

然后运行webpack进行打包。

file-loader会自动打包处理jpg文件，并且放到输出的目录中。

注：console.log的结果就是打包后图片的名称。

2.打包图片名称

如果我们想要让打包出来的图片名称和引入名称相同，要怎么做呢？

这时候我们就需要去loader中添加一些额外的配置了。

options中，[name]代表源文件名称，[ext]代表源文件后缀，这样打包出来的文件就和原来的文件名称相同了。

这种配置的语法叫做placeholder，也叫占位符。占位符的种类还有很多，比如[hash]等，具体可以去看webpack的官网( webpack.js.org/loaders/fil…)。

我们可以再给图片加一个hash值。

运行webpack打包后的结果

当然，file-loader不只可以打包jpg文件，还可以打包png等文件。

3.图片打包目录

我们可以在output中配置文件打包的目录，也可以在loader的options中单独配置图片的打包目录

运行webpack打包后的结果

这时候图片已经被打包到images文件夹中。

4.url-loader

提到 file-loader 就会想到 url-loader ， url-loader可以实现 file-loader 的功能，那他们有什么区别呢?

区别在于 url-loader 会把图片转为base64，而不是单独打包出一张图片。

好处是图片打包在js文件中，页面不需要额外发送一次http请求，而缺点是如果图片很大的话，js文件就会很大，会导致js加载变慢，页面出现空白的情况。所以当图片比较小的时候适合用 url-loader。

5.url-loader最佳实践

意思是如果图片超过204800个字节（200kb），就使用和 file-loader相同的方式进行打包。
如果图片小于204800个字节（200kb），就使用base64方式进行打包。

转载于:https://juejin.im/post/5cae00d6e51d456e6a1d020a