【谷粒学院项目开发19】webpack打包工具

最新推荐文章于 2023-01-24 12:40:06 发布
最新推荐文章于 2023-01-24 12:40:06 发布
阅读量308 收藏 1
点赞数
分类专栏： 谷粒学院项目开发学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taroriceball/article/details/110954830
版权

打包工具。可以把多个静态资源文件打包成一个文件，减少页面的请求

1.安装webpack工具

在这里插入图片描述
在这里插入图片描述

2.创建js文件用于打包操作

创建3个js文件。在common.js utils.js中定义方法。在main.js中引入common和utils
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.创建webpack配置文件，配置打包信息

在这里插入图片描述

4.使用命令执行打包操作

在这里插入图片描述
如果是下图这个指令，生成的文件是多行显示的。
在这里插入图片描述

5.最终效果

创建html文件，引入打包之后的js文件，使用浏览器查看效果。
在这里插入图片描述
在这里插入图片描述

6.打包CSS文件

6.1创建CSS文件，写样式内容

在这里插入图片描述

6.2在main.js里面引入CSS文件

在这里插入图片描述
后缀不能省略

6.3安装css加载工具

在这里插入图片描述

6.4修改webpack配置文件

在这里插入图片描述

6.5测试

在这里插入图片描述
在这里插入图片描述
成功！css样式也展示出来啦

taroriceball
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
SpringCloud+Jenkins+Docker持续部署积木学堂[谷粒学院]
积木
08-19 2267
【项目笔记】SpringCloud+Jenkins+Docker持续部署积木学堂 写在前面 本项目搞了三天两夜。。 好多东西不太理解，网上也搜不到答案，只能一点点的试，而且最开始目的是想压榨到服务器极限， 最后虽然成功部署，可是一段时间就会有微服务被kill掉。所以跟朋友又借了一台，各占一半内存，稳定性还高。 先说下准备工作 A：部署了九个微服务 （需要安装git，java，maven，docker） B：部署了Mysql，Nacos，Redis，前端项目（需要安装docker，node，nginx）
Webpack
qq_43555338的博客
03-21 865
文章目录一、什么是Webpack二、Webpack安装1、全局安装2、安装后查看版本号三、初始化项目1、创建webpack文件夹2、创建src文件夹3、src下创建common.js4、src下创建utils.js5、src下创建main.js四、JS打包1、webpack目录下创建配置文件webpack.config.js2、命令行执行编译命令3、webpack目录下创建index.html4、浏览器中查看index.html五、CSS打包1、安装style-loader和 css-loader2、修改w
谷粒学院——Day19【项目部署】
Java技术一点通
01-24 1841
我的电脑系统：Win10 项目：Javaweb项目 开发工具jdk1.8+Mysql8.0+Tomcat8.5 阿里云服务器系统：Centos7 其实将项目部署到阿里云服务器上不难，难的是你可能会遇到别人没有遇到的而又不好描述的问题，本项目的部署过程...
谷粒学院P21所需的maven jar包
qq_44820964的博客
03-22 394
谷粒学院p21guli_parent的pom.xml报错一大片红？没关系！我已经整理好了那些不容易得到的jar包！ 链接：https://pan.baidu.com/s/1-ylg5cJl9ztbgK4tzIOxYQ 提取码：o1fz 在设置里将maven的repository指定为该repository，重新打开idea。 若帮到了你，请点个赞！ 对应的pom.xml修改如下 <properties> <java.version>1.8</java.versi
谷粒学苑 Vue +NUXT +SpringCloud 部署到服务器
YZG ' BLOG
09-28 3631
项目结构： 报错：index.html 页面的 BASE_URL 找不到重新执行打包命令，会生成 dist 目录，打开 index.html发现又报错了：​ 修改 /config/index.js 中的 所有 assetsPublicPath 路径：修改之前：修改之后：按钮都变成这种小框框，F12 打开网络，发现 .woff 这个图标没有找到解决方法： 在 文件中，将以下配置改成 false准备工作使用 xftp 远程工具【其他的也行】，将打包好的 dist 目录上传到服务器上记住上传的路径，后面需要用，
基于打包工具Webpack进行项目开发实例
08-27
Webpack 是一款强大的前端资源打包工具，它能够将各种类型的模块（包括 JavaScript、CSS、图片等）打包成浏览器可执行的单一文件，极大地优化了前端项目的构建流程。在 React 学习实践中，Webpack 是一个不可或缺的...
详解如何使用webpack打包多页jquery项目
10-17
在现代前端开发中，Webpack 已经成为了一个重要的模块打包工具，它可以帮助我们将各种资源（JavaScript、CSS、图片等）整合在一起，形成可部署的静态文件。本篇文章将详细讲解如何使用Webpack打包多页jQuery项目，...
详解如何用webpack打包一个网站应用项目
08-29
Webpack 是一个流行的前端构建工具，可以将多个文件打包成一个文件，方便网站应用的开发和部署。 Webpack 的安装和配置 首先，需要安装 Node 环境和 Webpack。在项目目录下输入 `npm init` 初始化一个 Node 项目，...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 是一个流行的前端构建工具，它能够将 JavaScript、CSS、图片等各类前端资源打包成一个或多个可部署的文件。Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时...
webpack打包工具思维导图
09-19
webpack打包工具简介，常用的Loader、plugin配置介绍。
谷粒学院环境搭建
m0_59813955的博客
07-01 356
额 额而对方恐龙 接口定义创建数据库，创建目录结构 创建父工程guli（删除src目录） 打包方式设为pom 设置依赖管理（版本和依赖） 创建子模块service（删除src目录） 设置依赖和打包方式pom 创建eduservice二级子模块（一定是子子模块） 设置项目配置文件（）端口号 数据库连接信息 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mys..
2022年最新《谷粒学院开发教程》：1 - 构建工程篇
Laptoy的博客
05-12 4008
谷粒学院开发教程 第一章
dropbear 用户名_Openwrt基础配置
weixin_30682905的博客
01-13 881
——分享来自于“秀子营学习交流群 - 南京-学生-RivenNero”，经作者允许，可以转载分享。一、安装 openwrt1、opkg 升级先安装证书和一些必备组件opkg updateopkg install wget ca-certificates openssl-util ca-bundle curl换源cp /etc/opkg/distfeeds.conf /etc/opkg/distfe...
谷粒学院 02_谷粒学院项目介绍
lbw18的博客
07-09 1326
谷粒学院，是一个B2C模式的职业技能在线教育系统，分为前台用户系统和后台运营平台。 系统开发阶段使用了前后端分离架构，部署阶段使用了容器技术
谷粒学院16万字笔记+1600张配图(一)——项目介绍
maxiangyu_的博客
09-24 3192
先介绍一下常用的两种商业模式:①B2C模式(商家到用户)两个角色:管理员和用户管理员:添加,修改,删除普通用户:查询我们的在线教育项目使用的就是这种模式课程模块②B2B2C模式(商家到商家到用户)比如京东:我们是普通用户,可以买京东自营的商品,也可以买普通商家的商品首先,我们的项目有两部分,分别是系统后台(管理员使用)和系统前台(普通用户使用)项目采用前后端分离开发。
谷粒学院16万字笔记+1600张配图(十二)——课程管理
maxiangyu_的博客
09-29 1905
微服务是架构风格把一个项目拆分成独立的多个服务,多个服务是独立运行,每个服务占用独立进程(我们前面的8001、8002、8003端口就是这样的)Spring Cloud并不像Spring、Mybatis、JavaWeb、Servlet…那样是一种技术,而是很多技术的总称,或者说是很多技术的集合Spring Cloud里面有很多框架(技术),我们使用Spring Cloud里面这些框架实现微服务操作想要使用Spring Cloud需要依赖于框架SpringBoot。
谷粒学院——第二十二章、Jenkins可持续自动部署
ZMMMOO的博客
01-05 756
注意：进入安装插件页面，不要往下进行了，下载插件会很慢，配置国内镜像，为了提高下载速度，关掉浏览器，去配置镜像。cd /root/.jenkins/updates #进入更新配置位置。选择添加的用户，上面的红色提示信息消失，说明连接成功。添加git用户，git的用户名与密码。（3）把代码提交码云Git仓库里面。Jenkins（本文主要安装）、（4）在作业创建页面指定代码位置。（1）需要项目工程，需要做修改。（6）修改脚本路径，进行复制。（8）看到控制台日志输出。（7）执行作业（任务）使用老师给的资料即可。
使用dropbear搭建ssh服务。
热门推荐
樊越的专栏
11-12 1万+
最近做项目需要使用ramdisk启动linux，因为AMC介质板设计的时候没有想过从flash启动，所以flash只有8M.这8M大概是这样分配的： 1. 控制字。用来保证重启。 2. U-boot. 为了保证能成功引导，我们准备了两份U-boot，分别放在flash的前端和后端。 3. linux内核，基本上是最小内核了，但是要支持ext2和ramdisk. 4. 文件系统。包含busy
使用buildroot构建龙芯2K1000文件系统，并使用qt+OpenCV进行拍照，并使用dropbear搭建ssh服务
跑不了的你的博客
11-02 2389
使用buildroot构建龙芯2K1000文件系统 准备工作（下载buildroot） https://buildroot.org/download.html 进入目录，使用make menuconfig 依次进入各级菜单目录，进行如下配置： Cpio 可以说是一种打包方式，它包括一个或多个成员文件的连接， 每个成员文件 都包含一个头，后面还可以是头中所示的文件内容。存档的结尾由另一个...
webpack打包工具
最新发布
06-03
是的，Webpack是一个现代的JavaScript应用程序的静态模块打包工具。它可以将各种代码、样式、图像等文件打包成一个或多个JavaScript文件，以便在浏览器中加载。Webpack提供了丰富的插件和加载器，能够处理各种不同...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值