WebPack的使用及属性配、打包资源

WebPack(静态模块打包工具)(webpack默认只识别js和json内容)

在这里插入图片描述

WebPack的作用

把静态模块内容压缩、整合、转译等(前端工程化)
1️⃣把less/sass转成css代码
2️⃣把ES6+降级成ES5
3️⃣支持多种模块文件类型,多种模块标准语法

export、export default、module.exports、exports

导出方法的区别:参考文章

WebPack的使用(WebPack支持ECMA语法)

在这里插入图片描述

//--save-dev 表示在开发环境中使用而不安装到全局
npm i webpack-cli --save-dev

在package.json中加入自定义命令build(自己定义的,一般都用build)
在这里插入图片描述
运行工具命令

npm run build

生成dist文件
在这里插入图片描述
生成的main.js为src目录下的压缩文件,运行打包好的文件如下
在这里插入图片描述

修改WebPack打包入口和出口

点击查看webpack文档

在根目录下创建webpack.config.js文件,进行修改配置
在这里插入图片描述

可以在出口中添加 clean:true 来清空dist重新创建

打包资源

WebPack自动生成HTML

插件 html-webpack-plugin:在webpack打包时生成html文件
下载:

npm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [new HtmlWebpackPlugin()],//默认生成一个最简单的html5页面  //HtmlWebpackPlugin({template:path.join(_dirname,'文件路径')})  //以指定文件为模板
//    plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') })]
};

在这里插入图片描述

webpack打包css模块

npm i css-loader style-loader --save-dev

在这里插入图片描述

   module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]}]}

在这里插入图片描述

打包less模块

//less-loader将less转为css,因为浏览器只认识cssmodule: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]},{test: /\.less$/i,use: ["style-loader", "css-loader","less-loader"]}]}

在这里插入图片描述

打包图片

//type:‘asset’,根据文件大小(8kb)小于:把文件转成base64打包进js文件中(减少网络请求次数),大于:文件复制到输出的目录下

//在入口文件中引入图片
import img from './assets/logo.png'

在这里插入图片描述

babel编译器

在这里插入图片描述

WebPack开发服务器

在这里插入图片描述

还需要配置package.json文件,同时切换模式为开发者模式(不进行打包),自动监听入口文件的变化
在这里插入图片描述

运行服务器
npm run dev
//自动打开网页修改配置为"dev": "webpack server --open --mode=development"

打包模式

在这里插入图片描述

开发环境调错-source map

可以定位错误具体的位置而不是错误在压缩文件中的位置
在这里插入图片描述
注意:只在开发环境下使用
在这里插入图片描述

解析别名alias

在webpack.config.js中配置
在入口文件中使用别名时,入口文件会到webpack中通过别名找真正的路径
在这里插入图片描述
配置:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/290544.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络七层模型之数据链路层:理解网络通信的架构(二)

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

零基础10 天入门 Web3之第1天

10 天入门 Web3 Web3 是互联网的下一代,它将使人们拥有自己的数据并控制自己的在线体验。Web3 基于区块链技术,该技术为安全、透明和可信的交易提供支持。我准备做一个 10 天的学习计划,可帮助大家入门 Web3: 想要一起探讨学习的…

vue 窗口内容滚动到底部

onMounted(() > {scrollToBottom() }) // 滚动到底部方法 const scrollToBottom () > {// 获取聊天窗口容器let chatRoom: any document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop chatRoom.scrollHeight; } 效果 聊天窗口代码…

【Go】结构体中Tag标识

https://blog.csdn.net/weixin_45193103/article/details/123876319 https://blog.csdn.net/qq_49723651/article/details/122005291 https://juejin.cn/post/7005465902804123679 学一点,整一点,基本都是综合别人的,弄成我能理解的内容 Tag定…

Unity 窗口化设置

在Unity中要实现窗口化,具体设置如下: 在编辑器中,选择File -> Build Settings。在Player Settings中,找到Resolution and Presentation部分。取消勾选"Fullscreen Mode",并选择"Windowed"。设…

不愧是字节出来的,真厉害...

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号【互联网杂货铺】,回复 1 ,免费获取软件测试全套资料,资料在手,涨薪更快 前段时间公司缺人,也面了许多测试,一开始…

使用unplugin-auto-import页面不引入api飘红

解决方案:. tsconfig.json文件夹加上 {"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", &q…

安卓调试桥ADB

Logcat 命令行工具 | Android Studio | Android Developers 什么是ADB ADB 全称为 Android Debug Bridge ,是 Android SDK (安卓的开发工具)中的一个工具,起到调试桥的作用,是一个 客户端 - 服务器端程序 。其中 …

利用云手机技术,开拓海外社交市场

近年来,随着科技的不断进步,云手机技术逐渐在海外社交营销领域崭露头角。其灵活性、成本效益和全球性特征使其成为海外社交营销的利器。那么,究竟云手机在海外社交营销中扮演了怎样的角色呢? 首先,云手机技术能够消除地…

【SpringCloud】Ribbon负载均衡

🏡浩泽学编程:个人主页 🔥 推荐专栏:《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 🛸学无止境,不骄不躁,知行合一 文章目录 …

如何调试Clang源码

下载编译Clang 这个就直接去LLVM官网下载,然后编译好Clang就行,注意得debug模式,保存符号信息。 调试Clang 可以直接通过命令行来调试 #进入调试环境,这里的clang得是刚刚编译好的 lldb ./clang # r是运行,后面是正…

DC-9靶场

一.环境搭建 1.下载地址 靶机下载地址:https://download.vulnhub.com/dc/DC-9.zip 2.虚拟机配置 设置虚拟机为nat,遇到错误点重试和是 开启虚拟机如下图所示 二.开始渗透 1. 信息收集 查找靶机的ip地址 arp-scan -l 发现靶机的ip地址为192.168.11…

rust使用Command库调用cmd命令或者shell命令,并支持多个参数和指定文件夹目录

想要在不同的平台上运行flutter doctor命令,就需要知道对应的平台是windows还是linux,如果是windows就需要调用cmd命令,如果是linux平台,就需要调用sh命令,所以可以通过cfg!实现不同平台的判断,然后调用不同…

Kibana操作Elasticsearch教程

文章目录 简介ES文档操作创建索引查看索引创建映射字段查看映射关系字段属性详解typeindexstore 字段映射设置流程 新增数据新增会随机生成id新增自定义id智能判断 修改数据删除数据查询基本查询查询所有(match_all)匹配查询多字段查询词条匹配多词条精确…

2024 年广西职业院校技能大赛高职组《云计算应用》赛项样卷

#需要资源(软件包及镜像)或有问题的,可私博主!!! #需要资源(软件包及镜像)或有问题的,可私博主!!! #需要资源(软件包及镜…

Vue生命周期,从听说到深入理解(全面分析)

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶…

关于Devc++调试的问题以及解决STL变量无法查看

目前Devc的调试主要有以下几点: 1.调试不能直接查看stl变量,会卡死不动 2.目前单步进入只能用鼠标键按 3.若想按下一步进入函数体内,要在函数体内打上断点才行 4.调试到return 0 ;上一句就停了,不会结束程序 5.目前F2跳至断点…

docker logs 查找日志常用命令

docker logs 是什么 docker logs 是 Docker 命令行工具提供的一个命令,用于查看容器的日志输出。它可以显示容器在运行过程中生成的标准输出(stdout)和标准错误输出(stderr),帮助用户诊断容器的行为和排查…

慧天【HTWATER】:水文水动力模型的革命性工具,城市内涝的精准解决方案

城市内涝水文水动力模型介绍 在城市排水防涝规划过程中,水文水动力耦合模型已经成为一种不可或缺的分析工具。在模型建立、城市内涝风险评估、排水系统性能诊断以及海绵城市规划等方面,内涝耦合模型提供了相应的模拟及分析工具: 1.1丰富的数…

一、JAVA集成海康SDK

JAVA集成海康SDK 文章目录 JAVA集成海康SDK前言一、项目依赖 jar1. examples.jar2. 项目依赖 jna.jar,可以通过 maven依赖到。二、集成SDK1.HcNetSdkUtil 海康 SDK封装类2.HCNetSDK3.Linux系统集成SDK三、总结前言 提示:首先去海康官网下载 https://open.hikvision.com/dow…