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中,里面的内容是字符串
Webpack处理各类型资源(二)——开发环境_第1张图片

处理less资源:需要下载配置(loader)

style-loader
css-loader
less-loader:负责将less文件翻译成css文件
依赖包less:这个不需要在loader中配置,只需要和less-loader一起下载即可
Webpack处理各类型资源(二)——开发环境_第2张图片

处理HTML资源:需要下载引入配置(plugins)

html-webpack-plugin:该插件需要在plugins下配置。
功能:
①默认创建一个空的HTML,引入打包输出的所有资源(js/css)
②如果需要有结构的HTML文件中的内容
属性:template:‘./src/index.html’
//复制一个HTML文件源(文件源中的html结构),并引入打包输出的所有资源(js/css)
Webpack处理各类型资源(二)——开发环境_第3张图片

处理js模块引入的图片资源:需要下载配置(loader)

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

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

name:‘[hash:10].[ext]’
①给图片进行重命名
②[hash:10]取图片的hash前10位(位数自己可以设置别的)
③[ext]取文件原来扩展名
Webpack处理各类型资源(二)——开发环境_第4张图片
在这里插入图片描述

图片资源遇到的问题:

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

处理图片资源:

html-loader解决问题
Webpack处理各类型资源(二)——开发环境_第5张图片
期待效果是这样的:
在这里插入图片描述

html-loader中遇到的bug:

①源HTML中的link链接会与html-loader冲突,删掉即可解决
在这里插入图片描述
在这里插入图片描述

Webpack处理各类型资源(二)——开发环境_第6张图片

处理其他资源:字体图标(我们不需要做任何处理,原封不动输出)

①引入阿里图标资源
Webpack处理各类型资源(二)——开发环境_第7张图片
②入口文件引入阿里图标css
在这里插入图片描述
③file-loader配置
Webpack处理各类型资源(二)——开发环境_第8张图片

devServer本地服务器的配置(自动检测src中改变的代码,自动编译):

①安装webpack-dev-server
②进行配置
③启动devServer命令: npx webpack-dev-server
Webpack处理各类型资源(二)——开发环境_第9张图片

文件类型的分门别类

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

效果图:
Webpack处理各类型资源(二)——开发环境_第10张图片
在这里插入图片描述

Webpack处理各类型资源(二)——开发环境_第11张图片
Webpack处理各类型资源(二)——开发环境_第12张图片

你可能感兴趣的:(webpack)