webpack打包其他资源

Posted 2021-07-25 coder斌

webpack打包其他资源文件

• • 图片打包
  • • file-loader的使用
    • • css内引入图片资源
      • 代码创建元素设置属性依赖图片
    • url-loader的使用
  • webpack5内asset打包方式
  • 字体打包-字体文件打包
  • 插件的使用
  • • CleanWebpackPlugin的使用
    • HtmlWebpackPlugin的使用
    • CopyWebpackPlugin的使用
  • mode和devtool的设置

图片打包

file-loader的使用

css内引入图片资源

安装

npm install file-loader -D

• outputPath:图片文件打包的放在哪个文件夹下。
• name:文件图片打包后的命名方式。
  • [name]打包后的名字和原文件名一致。
  • [hash:4]指定hash值得位数，防止文件名字重复。
  • [ext]打包后的名字和原文件后缀一致。

代码创建元素设置属性依赖图片

若是代码创建img标签，因为img标签有src属性，我们不能手动赋值图片的位置，而是得将资源引入赋值给 src

url-loader的使用

url-loader其实也是和file-loader功能类似，但是url-loader可以将图片设置成对应的base64编码

• limit小于limit设定的值，便会转换成base64的编码。大于设定值便会和打包成独立文件
• name，outputPath的设置和上面一样。

webpack5内asset打包方式

webpack5开始内部就已经提供了资源模块类型来完成之前提到过loader的工作

• asset/resource:匹配到一个文件，导出一个URL。功能实现==> file-loader
• asset/resource:匹配到一个文件，导出一个URI。功能实现 没有详细配置的==> url-loader
• asset：匹配到一个文件。通过配置文件决定导出URL还是URI==> 具有限制体积的url-loade
• asset/source

还是对图片进行打包：

配置

除了在名字上配置好打包路径外还可以配置在 output内

字体打包-字体文件打包

字体文件打包可以借助file-loader 或asset

配置都是类似的

插件的使用

CleanWebpackPlugin的使用

目前我们重新打包，每次都要删除dist文件夹，防止有些文件残留在里面，手动删除太麻烦。我们开始使用插件。

安装 npm install clean-webpack-plugin -D

webpack.config.js内配置 注意插件时需要先引入，才能使用的。

htmlWebpackPlugin的使用

目前我们的dist文件内没有对应的入口html文件，而是外部应用的，那是不可取的。

安装 npm install html-webpack-plugin -D

这里需要一个html模板,我们这里直接从Vue过程文件里面取出public文件夹。

配置

CopyWebpackPlugin的使用

接下来我们希望将public下的内容也放进dist文件夹内，运用赋值

安装 npm install copy-webpack-plugin -D

mode和devtool的设置

• mode:'development'设置开发环境还是生产环境，对应的环境webpack会帮助我们自动加上一些配置。
• devtool:'source-map'作用看图说话。

简而言之，就是在浏览器窗口调试时，显示的是webpack打包后的js文件，还是原始文件格式。