学习webpack【第三章-核心概念0】
2019-09-25 本文已影响0人
zzyo96
一、什么是loader
二、loader的相关配置
三、使用plugins
_________________________
一、什么是loader
当在js文件中引入一个图片
image.png
需要在modules中进行相关配置，因为webpack不知道怎么打包jpg 所以要在module中告诉他怎么打包，rules是个数组，里面可以有很多的规则，test是告诉webpack 如果一个文件是以.jpg结尾就用file-loader去打包。当然这个时候需要安装一下file-loader npm install file-loader -D
image.png
再进行打包，就会在在dist目录中多了一个图片，而对图片进行打包的结果是 图片的地址值
image.png
那么啥是loader ?
1.loader就是一个打包方案，webpack负责打包，但是它不能识别非.js结尾的模块，那么loader作用就是提出方案，告诉webpack怎么去打包
二、loader的相关配置
1.其中的options是一些详细信息，比如打包出的文件名字name是当前名字+hash值+当前文件的后缀名
outputPath 输出路径，在dist/images/中
image.png
2.url-loader
看下面的图，url-loader与file-loader 功能基本相同，不同的是url-loader有一个limit参数，他的意思是如果一个文件大于10240bit ，就会转为一个真正的图片，如果小于的话就就将图片转为一个base64的图片码在bundle.js中
image.png
三、使用plugins
1.htmlWebpackPlugin
作用：
这个插件会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中
使用：
先安装 npm install xx
image.png
image.png
上图中，template是模板，指的是在打包生成的index.html中的内容按照template 中的路径的内容来写的。
2.clean-webpack-plugin
作用：
每次打包的时候都自动删除dist目录，然后在将打包结果放在新生成的dist目录中
使用
image.png
image.png
