webpack5打包普通html项目,webpack打包其他资源

webpack打包其他资源文件

图片打包

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文件，还是原始文件格式。

标签：文件,url,loader,webpack,打包,file,资源

来源： https://blog.csdn.net/weixin_47529373/article/details/117904393

webpack5打包普通html项目,webpack打包其他资源相关推荐

webpack打包普通html项目,webpack打包处理
简介 ?webpack 是前端最流行的打包工具,能够做到以下: 1) 将 sass/less 等预编译的CSS语言转化为浏览器能够识别的 css 文件 2 )能够将多个文件(比如:多个sass文件 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
php项目webpack打包,利用node.js对webpack打包
本篇文章主要介绍了webpack打包node.js后端项目的方法,现在分享给大家,也给大家做个参考. 本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖npm ...
VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
jq项目webpack打包步骤
webpack打包多html传统项目生成package.json文件 npm init -y全局安装webpack cnpm install webpack -g项目中安装,生成node_modul ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
vue项目webpack打包后字体失效
打包之后的:font-family:\5FAE\8F6F- 多了一个反斜杠定位是写字体的时用汉字的原因,汉字打包成会被译成编码替换成对应的英文就可以了

webpack5打包普通html项目,webpack打包其他资源

webpack5打包普通html项目,webpack打包其他资源相关推荐

最新文章

热门文章