第6篇 vue的打包工具webpack

一 webpack

1.1 webpack的作用

webpack是一个打包工具,可以把多个静态资源文件打包成一个文件。如图所示:

1.2 版本依赖对照关系

PS E:\vue-project\vue-demo0902\wp-demo> npm -v
6.4.1
PS E:\vue-project\vue-demo0902\wp-demo> node -v
v10.14.2
PS E:\vue-project\vue-demo0902\wp-demo> webpack -v
4.43.0

style-loader与css-loader

 二  webpack的打包案例

2.1 安装webpack

npm install -g webpack webpack-cli

查看安装版本

2.2 新建工程初始化

进入webpack目录,执行命令  npm  init  -y

2.3 在工程中新建src目录

2.4 新建脚本文件

在src目录下新建几个文件:

1.新建common.js文件

exports.info = function (str) {document.write(str);}

2.新建utils.js文件

exports.add = function (a, b) {return a + b;}

3.新建main.js文件

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

2.4 在工程目录下新建一个webpack.config.js文件

代码

const path = require("path"); //Node.js内置模块
module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径filename: 'bundle.js' //输出文件}
}

2.5 执行打包

执行命令: webpack --mode=development #没有警告

打成包后可以看到,生成了dist文件夹

2.6 引用

 新建一个index.html文件,引入bundle.js文件

2.7 执行观察

 

三  案例3:打包css文件

3.1  安装style和css加载器

直接执行命令Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css。

直接执行命令:

npm install --save-dev style-loader css-loader 

在进行打包时候会报错,需要降低版本安装

安装2.x版本

PS E:\vue-project\vue-demo0902\wp-demo> npm install css-loader@2.0.2 --save-dev
npm WARN style-loader@3.3.1 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN wp-demo@1.0.0 No description
npm WARN wp-demo@1.0.0 No repository field.

+ css-loader@2.0.2
found 0 vulnerabilities

PS E:\vue-project\vue-demo0902\wp-demo> npm install style-loader@0.23.1 --save-dev
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN wp-demo@1.0.0 No description
npm WARN wp-demo@1.0.0 No repository field.

updated 1 package and audited 30 packages in 6.967s

Hash: 96e299bd847414758aae
Time: 494ms
Built at: 2023-09-10 11:42:17
    Asset    Size  Chunks             Chunk Names
bundle.js  24 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 178 bytes {main} [built]
[./src/common.js] 68 bytes {main} [built]
[./src/main.js] 158 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
[./src/utils.js] 61 bytes {main} [built]
    + 3 hidden modules

 3.2 修改webpack.config.js

代码:

module: {rules: [  {  test: /\.css$/,    //打包规则应用到以css结尾的文件上use: ['style-loader', 'css-loader']}  ]  }

 3.3 在src文件夹创建style.css

body{

    background-color:red;

}

3.4 在main.js中进行加载

3.5 发布打包

1.删除dist文件目录

2.在命令行执行:webpack --mode=development

页面访问:

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

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

相关文章

Redis使用原生命令搭建集群

1.Redis版本及下载 找到安装的redis版本,redis3.0以上版本才支持集群 下载对应的版本 2.安装redis集群 解压上传编译 [hadoophost152 opensource]$ tar -xvf redis-3.2.11.tar.gz [hadoophost152 opensource]$ cd redis-3.2.11/ [hadoophost152 redis-3.2.11]$ ma…

从零开始的PICO教程(4)--- UI界面绘制与响应事件

从零开始的PICO教程(4)— UI界面绘制与响应事件 文章目录 从零开始的PICO教程(4)--- UI界面绘制与响应事件一、前言1、大纲2、教程示例 二、具体步骤1、PICO VR环境配置2、XR的UI Canvas画布创建与调整(1)C…

用滑动条做调色板---cv2.getTrackbarPos(),cv2.creatTrackbar()

滑动轨迹栏作调色板 cv.createTrackbar(‘R’, ‘image’, 0, 255, nothing) 参数:哪个滑动轨迹栏,哪个窗口,最小值,最大值,回调函数 cv.getTrackbarPos(‘R’, ‘image’) 参数:轨迹栏名,窗口…

【Matlab】Matlab实现数据的动态显示方法

Matlab实现数据的动态显示方法 主要为大家详细介绍了Matlab使用Plot函数实现数据动态显示方法,具有一定的参考价值,感兴趣的小伙伴们可 以参考一下 对于真实系统或者仿真平台,数据是增量式的产生的。Matlab除了强大的矩阵运算外,还…

CSS 斜条纹进度条

效果&#xff1a; 代码&#xff1a; html: <div class"active-line flex"><!-- lineWidth&#xff1a;灰色背景 --><div class"bg-line"><div v-for"n in 30" class"gray"></div></div><div…

win10环境安装使用docker-maxwell

目的&#xff1a;maxwell可以监控mysql数据变化&#xff0c;并同步到kafka、mq或tcp等。 maxwell和canal区别&#xff1a; maxwell更轻量&#xff0c;canal把表结构也输出了 docker bootstrap可导出历史数据&#xff0c;canal不能 环境 &#xff1a;win10&#xff0c;mysql5…

PYTHON(一)——认识python、基础知识

一、为什么要学习python&#xff1f; Python 被认为是人工智能、机器学习的首选语言&#xff0c;可以说是全世界最流行通用范围最广的语言&#xff0c;几乎可以完成所有的任务&#xff0c;像设计游戏、建网站、造机器人甚至人工智能等都广泛使用Python。 二、输出&#xff08;…

机器学习——K最近邻算法(KNN)

机器学习——K最近邻算法&#xff08;KNN&#xff09; 文章目录 前言一、原理二、距离度量方法2.1. 欧氏距离2.2. 曼哈顿距离2.3. 闵可夫斯基距离2.4. 余弦相似度2.5. 切比雪夫距离2.6. 马哈拉诺比斯距离2.7. 汉明距离 三、在MD编辑器中输入数学公式&#xff08;额外&#xff0…

门面设计模式

github&#xff1a;GitHub - QiuliangLee/pattern: 设计模式 1 什么是门面设计模式 门面设计模式是一种软件设计模式&#xff0c;也被称为外观&#xff08;Facade&#xff09;模式。它提供了一个简单的接口&#xff0c;让客户端能够访问复杂系统中的一组接口。通过门面模式&a…

企业架构LNMP学习笔记15

客户端缓存&#xff1a; B/S架构里&#xff0c;Browser是浏览器&#xff0c;就是客户端。 客户端缓存告知浏览器获取服务段的信息是在某个区间时间段是有效的。 每次请求从服务器拿一遍数据&#xff0c;数据没有变化&#xff0c;影响带宽&#xff0c;影响时间。刷新又要去加载…

Java中快速排序的优化技巧:随机取样、三数取中和插入排序

目录 快速排序基础 优化1&#xff1a;随机取样 优化2&#xff1a;三数取中 优化3&#xff1a;插入排序 总结&#xff1a; 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;它的平均时间复杂度为O(n log n)。然而&#xff0c;在某些情况下&…

Python实现猎人猎物优化算法(HPO)优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

spring boot-Resolved element must not contain multiple elements 警告

首先强调一下&#xff0c;此问题不影响程序运行。 报错信息&#xff1a; package org.springframework.util; ...public abstract class Assert ...public static void state(boolean expression, String message) {if (!expression) {throw new IllegalStateException(messa…

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…

flink 端到端一致性

背景 我们经常会混淆flink提供的状态一致性保证和数据端到端一致性保证的关系&#xff0c;总以为他们表达的是同一个意思&#xff0c;事实上&#xff0c;他们不是一个含义&#xff0c;flink只能保证其维护的内部状态的一致性&#xff0c;而数据端到端的一致性需要数据源&#…

安装samba服务器

1.实验目的 &#xff08;1&#xff09;了解SMB和NETBIOS的基本原理 &#xff08;2&#xff09;掌握Windows和Linux之间&#xff0c;Linux系统之间文件共享的基本方法。 2.实验内容 &#xff08;1&#xff09;安装samba服务器。 &#xff08;2&#xff09;配置samba服务器的…

unity 控制Dropdown的Arrow箭头变化

Dropdown打开下拉菜单会以“Template”为模板创建一个Dropdown List&#xff0c;在“Template”上添加一个脚本在Start()中执行下拉框打开时的操作&#xff0c;在OnDestroy()中执行下拉框收起时的操作即可。 效果代码如下用于控制Arrow旋转可以根据自己的想法进行修改&#xff…

算法:移除数组中的val的所有元素---双指针[2]

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/132689237 欢迎各位大佬指点、三连 1、题目&#xff1a; 给你一个数组 nums和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用…

【Proteus仿真】【STM32单片机】血压心率血氧体温蓝牙

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后&#xff0c;LCD1604液晶显示心率、血氧、血压和体温&#xff0c;及其阈值&#xff1b;可通过K3键进入阈值设置模式&#xff0c;K1和K2加减调节&#xff0c;K4确定&#xff1b;当检测心率、血氧…

linux 多重启动grub2详解

https://www.gnu.org/software/grub/manual/grub/grub.pdf