Webpack处理各类型资源(二)——开发环境

webpack(二)知识点：

①webpack只会识别js/json
②样式资源（css/img/其他资源）则需要使用其他插件来进行识别。
③所有的构建工具都是基于nodejs平台运行的！模块化采用commonjs规范
④当我们多个文件引入同一个资源，webpack只会打包一次资源（不会重复打包）
⑤loader配置步骤：①下载②配置
⑥plugins配置步骤：①下载②引入③配置

开发环境配置目录：

①css处理
②less处理(更多css类型的文件处理，请百度)
③html的处理
④js入口文件中图片的处理
⑤html中img图片的处理
⑥其他文件的处理：文字图片等
⑦本地服务器处理
⑧文件类型分类，需要分类的有js/img/其他文件类型

处理css资源：需要下载配置（loader）

style-loader：创建style标签，读取打包后js中的样式，并将其插入到head标签中
css-loader：负责将css文件变成commonjs模块加载到打包的js中，里面的内容是字符串

处理less资源：需要下载配置（loader）

style-loader
css-loader
less-loader：负责将less文件翻译成css文件
依赖包less：这个不需要在loader中配置,只需要和less-loader一起下载即可

处理HTML资源：需要下载引入配置（plugins）

html-webpack-plugin：该插件需要在plugins下配置。
功能：
①默认创建一个空的HTML,引入打包输出的所有资源（js/css）
②如果需要有结构的HTML文件中的内容
属性：template：‘./src/index.html’
//复制一个HTML文件源（文件源中的html结构），并引入打包输出的所有资源（js/css）

处理js模块引入的图片资源：需要下载配置（loader）

url-loader
依赖包 file-loader只需下载，无需配置

url-loader属性options：
limit：
①用来限制小图片的输出格式
②当图片小于设置的值，就会被base64处理
base64优点：
1>减少请求数量，减轻服务器压力
缺点：
1>图片体积会更大，文件请求速度会更慢，建议给小图片设置门槛。

name：‘[hash:10].[ext]’
①给图片进行重命名
②[hash:10]取图片的hash前10位（位数自己可以设置别的）
③[ext]取文件原来扩展名

图片资源遇到的问题：

①webpack只会识别由入口文件引入的相关联图片
②不会识别源HTML中的 img 标签中的图片链接，依旧是相对路径。

处理图片资源：

html-loader解决问题

期待效果是这样的：

html-loader中遇到的bug：

①源HTML中的link链接会与html-loader冲突，删掉即可解决

处理其他资源：字体图标（我们不需要做任何处理，原封不动输出）

①引入阿里图标资源

②入口文件引入阿里图标css

③file-loader配置

devServer本地服务器的配置（自动检测src中改变的代码，自动编译）：

①安装webpack-dev-server
②进行配置
③启动devServer命令： npx webpack-dev-server

文件类型的分门别类

打包完了之后是不是觉得文件很乱，所以我们要对js/img/其他文件使用options中outputPath进行处理。
css例外，因为css已经被commonjs模块打包进了js文件。

效果图：