之前学习过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方式进行打包。