首页 > 其他分享 >webpack4基本使用和url-loader压缩图片

webpack4基本使用和url-loader压缩图片

时间:2023-02-14 15:38:42浏览次数:49  
标签:文件 webpack4 img url js webpack path loader


执行npm init -y, 创建package.json 文件

最基本的配置文件

entry:入口文件

output:出口,出口里面添地址,和导出的包的名字

mode 是模式默认production,可以选择为development,也可none

production:生产模式:去掉debug代码,和未使用的方法函数模块,小体积,速度快

development:开发模式:文件会大些,包含debug代码等

webpack4基本使用和url-loader压缩图片_预加载

const path = require('path')

module.exports = {
entry:path.join(__dirname,'./src/js/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'mainbunle.js'
},
mode:'development'
}

也可以不加path.join:

module.exports = {
entry:'./src/js/main.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'mainbunle.js'
},
mode:'development'
}

一次打包多个文件

module.exports = {
entry:{
main:'./src/js/main.js',
home:'./src/js/home.js',
about:'./src/js/about.js',
},
output:{
path:path.join(__dirname,'./dist'),
filename:'[name].bunle.js'
},
mode:'development'
}
filename:'[name].bunle.js' 这句话表示在输出时文件的名字根据上面的名字来定[main,home,about].bunle.js

webpack4基本使用和url-loader压缩图片_webpack_02


Loaders 预加载

npm init -y
npm install url-loader -S//url-loader下载的图片格式用的loader插件
npm install file-loader -S
可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:

npm install --save-dev css-loader//如果用到css文件预加载
npm install --save-dev ts-loader//如果用到ts文件预加载

可以将各种类型文件转成js格式上传网站
例如将图片使用loader打包成base64格式,放在js文件中引用
这里预加载文件的格式位正则匹配/.(png|jpg|gif)$/i格式位png,jpg,gif,的文件进行预加载
options: {
limit:18192
}
表示文件最大大小为 18192 = >18KB,如果js中imort引入的图片大于这个值,打包不会成功,会多出一个图片的文件,成功的话就会在指定路径生成一个新的js文件,在html文件中引入这个包,就可以使用导入的img了
配置文件:

module.exports = {
entry:path.join(__dirname,'./src/js/loaderImg.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'loader_img.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit:18192
}
}
]
}
]
}
}

js文件

import img from '../img/vuelogo.png'//引入img
console.log("LoaderImg");
//将img渲染到dom中
let oImg = document.createElement('img');
oImg.src = img;
document.body.appendChild(oImg);

html文件中引用webpack打包后的js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="dist/loader_img.js"></script>
</body>
</html>

webpack4基本使用和url-loader压缩图片_预加载_03


图片就显示出来了,这里用的是url-loader,如果要预加载css文件或别的类型的文件需下载对应的loader插件

下面是用webpack-dev-serve热加载后包会放在根目录下,存放在内存中,项目中看不到包的行为,使用 publicPath 配置会看到打包好的文件。

webpack-dev-server也会进行打包,代码只要一变动,它就会打包,只不过它打包到的地方是计算机的内存,在硬盘中看不到。再具体一点,默认情况下,webpack-dev-server 会把打包后的文件放到项目的根目录下,文件名是在output配置中的filename. 但是当有publicPath 配置的时候,就不一样了。Webpack 会把所有的文件打包到publicPath指定的目录下,就是相当于在项目根目录下创建了一个publicPath目录, 然后把打包成的文件放到了它里面,只不过我们看不到而已, 文件名还是output配置中的filename。
新建一个文件夹webpack-tut, 执行npm init -y, 创建package.json 文件,同时初始化为node 项目。再在里面新建 src 文件夹和webpack.config.js 配置文件。在src 里面再新建css文件夹,img文件夹,index.js。css 文件夹 有一个style.css 放置样式,在img文件夹中放置一大一小两张图片, 小的图片1kb, 大的图片5kb. index.js 作为入口文件,npm install webpack webpack-dev-server css-loader style-loader url-loader file-loader --save-dev 来安装依赖. package.json中先写两个命令:

“scripts”: {

“build”: “webpack”,

“dev”:“webpack-dev-server”

},

最后如果本文对你有用的话欢迎你关注我的公众号,会有各种技术栈的文章

webpack4基本使用和url-loader压缩图片_html_04


标签:文件,webpack4,img,url,js,webpack,path,loader
From: https://blog.51cto.com/u_15964288/6056956

相关文章

  • Java 通过get post 请求url
    .已获取小程序的access_token为例,通过Get请求url1importcom.alibaba.fastjson.JSONObject;23StringwechatUrl="https://api.weixin.qq.com/cgi-bin/tok......
  • Java中Class.forName和 ClassLoader.loadClass()区别
    一、类加载过程装载:通过累的全限定名获取二进制字节流,将二进制字节流转换成方法区中的运行时数据结构,在内存中生成Java.lang.class对象;  链接:执行下面的校验、准备和解......
  • 位图:爬虫URL去重最佳方案
    网页爬虫,解析已爬取页面中的网页链接,再爬取这些链接对应网页。而同一网页链接有可能被包含在多个页面中,这就会导致爬虫在爬取的过程中,重复爬取相同的网页。1如何避免重复爬......
  • The Protocol-relative URL|协议相对网址
    前言最近基于https的网站,引用http网站的资源文件出现了报错,最初的解决办法是添加两套引入,也就是http、https都写上<scriptsrc="http://a.js"></script><script......
  • 解决curl中文乱码问题
    文章目录​​1、问题描述​​​​2、解决方案:安装iconv​​1、问题描述curl下载地址:​​https://curl.se/download.html​​​在执行命令​​curlwww.baidu.com​​的时候......
  • admin后台 前端页面代码及样式效果、创建用户、注册表模型、重写admin表名、增删改查
    0.前端页面代码、样式效果 1.创建用户:   2.注册表模型: 3.重写admin表名   4.增删改查的URL   5.用户表信息增信息解决用户电话不能为空 ......
  • Linux 上 libcurl库 curl_easy_perform Crash(signal 11 - SIGSEGV)
    PS:要转载请注明出处,本人版权所有。PS:这个只是基于《我自己》的理解,如果和你的原则及想法相冲突,请谅解,勿喷。前置说明  本文作为本人csdnblog的主站的备份。(BlogID......
  • Libcurl & Log4cplus 移植和使用 以及 Jsoncpp 简单使用
    PS:要转载请注明出处,本人版权所有。PS:这个只是基于《我自己》的理解,如果和你的原则及想法相冲突,请谅解,勿喷。前置说明  本文作为本人csdnblog的主站的备份。(BlogID......
  • Vue课程22-使用babel-loader处理高级的js语法
        //导入jqueryimport$from'jquery'//导入图片文件importlogofrom"./logo.jpg"//给img标签的src动态赋值$('.box').attr('src',logo)//定义jquery的入口import......
  • #yyds干货盘点#Linux Curl 命令示例
        CURL是服务器上用于数据传输的命令行工具。CURL支持许多协议,例如:DICT,FILE,FTP,FTPS,GOPHER,HTTP,HTTPS,IMAP,IMAPS,LDAP,LDAPS,POP3,POP3S,RTM......