webpack基本概念及使用

2023-05-16

webpack是什么,用来干什么?

        webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具

 webpack的下载安装

        官网文档地址:https://webpack.js.org/

        一般情况下借助node安装和下载,所以安装node时webpack的前提条件;

                

        webpack的安装(webpackwebpack-cli)

                全局:npm install webpack webpack-cli –g

                局部:npm install webpack webpack-cli –D

webpack打包都是用来干什么?           

        1:JavaScript的打包:
                将ES6转换成ES5的语法;
                TypeScript的处理,将其转换成JavaScript;
        2:Css的处理:
                CSS文件模块的加载、提取;
                Less、Sass等预处理器的处理;
        3:资源文件img、font:
                图片img文件的加载;
                字体font文件的加载;
        4:HTML资源的处理:
                打包HTML资源文件;
        5:处理vue项目的SFC文件.vue文件;

webpack打包

        直接webpack打包

               流程: 

                        创建一个文件夹(最好文件名为英文),然后直接cd到该文件目录下,直接执行命令webpack,即可见到在该文件夹下创建了一个名为个dist文件夹,里面存放一个main.js的文件,就是我们打包之后的文件;

              弊端:

                        1:打包不彻底,依然存在ES6语法等;

                        2:代码被压缩;

                        3:webpack依赖于会查找当前目录下的 src/index.js作为入口,没有这个入口则会报错,如:                                 

                                解决方式:我们也可以通过配置来指定入口和出口,如:npx webpack --entry ./src/main.js --output-path ./build

                                        其中/src/main.js为入口文件;./build为出口文件;

        webpack局部打包

                流程:

                        第一步:创建package.json文件,用于管理项目的信息、库依赖等;

                                        npm init

                        第二步:安装局部的webpack

                                        npm install webpack webpack-cli -D        

                        第三步:使用局部的webpack

                                        npx webpack

                        第四步:在package.json中创建scripts脚本,执行脚本打包即可

                                        npm run build

         Webpack配置文件

                 流程:

                        以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件

                        继续执行webpack命令,依然可以正常打包

                                npm run build

                        如果我们的配置文件并不是webpack.config.js的名字的文件时,而是wk.config.js,可以通过 --config 来指定对应的配置文件;

                        webpack --config wk.config.js

但是每次这样执行命令来对源码进行编译,会非常繁琐,所以我们可以在package.json中增加一个新的脚本;执行行 npm run build来打包即可;

 

                

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack基本概念及使用 的相关文章

  • mysql动态字段行转列

    动态行转列 table schema id name s 001 是否吃饭了 s 002 你的汽车品牌 table schema value id user id schema id schema value span class toke
  • freertos学习02-队列 stream buffer message buffer

    1 freertos数据传递简介 在freertos中 xff0c 各个模块都是独立的任务 xff0c 那么任务之间怎么进行大量的数据通信呢 xff1f 在V10版本给出了三种方法 队列queue xff0c 发送固定长度的数据串strea
  • stlink故障修复

    前言 一直用的是国产版stlink xff0c 但是最近手头手头上的两个stlink在下载的时候出故障了 xff0c 无法识别 上淘宝一搜发现涨价了 xff0c 记得以前是20左右 xff0c 现在都要40快一个 于是想着能不能进行修复 百
  • ssd.pytorch源码分析(三)— 非极大值抑制NMS

    NMS源码 SSD论文链接 NMS介绍 吴恩达对于NMS xff08 非极大值抑制 xff09 的介绍 xff1a 说白了 xff0c NMS的作用就是去掉目标检测任务重复的检测框 例如 xff0c 一个目标有多个选择框 xff0c 现在要
  • Hexo的常用命令

    Hexo 常见命令 hexo s hexo s 启动服务器 xff0c 用于预览主题 hexo s 是 hexo server 的缩写 xff0c 命令效果一致 xff1b 预览的同时可以修改文章内容或者主题的代码 xff0c 保存后刷新即
  • hexo史上最全搭建教程

    外链图片转存失败 源站可能有防盗链机制 建议将图片保存下来直接上传 img CF2m4SwD 1628816637063 http peu31tfv4 bkt clouddn com 1 jpg 花了几天搭建了个网站 xff0c 先上链接
  • Neutron中的物理网络详解

    Neutron的模型定义 xff0c 关于物理网络 xff08 provider physical network xff09 有三个地方都有所涉及 xff0c 如下表所示 应该说 xff0c 这三处描述仍然不能很好地表达这个物理网络的准确
  • SAR空间自回归模型

    空间自回归模型 Spatial autoregressive models 适用于包含地理区域 观测数据的数据集 观测空间单位 xff0c 可以是国家 州 县 邮政编码或城市街区 或者 xff0c 社交网络的节点 SAR是什么 xff1f
  • conda安装sklearn库失败

    conda install sklearn PackagesNotFoundError The following packages are not available from current channels sklearn conda
  • 找不到GLIBCXX_3.4.29问题

    参考资料 xff1a 1 2022 02 01 Windows下配置深度学习环境 xff08 Ubuntu 43 Anaconda 43 CUDA 43 Pytorch 43 gcc xff09 知乎 2 version 96 GLIBCX
  • [TW 2023] 将三图神经网络与多个隐式反馈相结合,用于社交推荐

    Incorporating A Triple Graph Neural Network with Multiple Implicit Feedback for Social Recommendation ACM Transactions o
  • [INFOCOM 2019] NeuralWalk:使用神经网络的在线社交网络中的信任评估

    NeuralWalk Trust Assessment in Online Social Networks with Neural Networks IEEE Conference Publication IEEE Xplore 摘要 xf
  • [CDC 2018] 理解压缩对抗隐私

    Understanding Compressive Adversarial Privacy IEEE Conference Publication IEEE Xplore 摘要 本文提出了一种新的隐私保护方法 xff0c 称为 压缩对抗隐私
  • 弱实体集

    弱实体 weak entity 1 定义 xff1a 有些实体集的所有属性都不足以形成主码 xff0c 这样的实体集称为弱实体集 与此相对 xff0c 其属性可以形成主码的实体集称为强实体集 通俗的说 xff1a 有些实体集的所有属性都不足
  • 理解“生成高斯随机测量矩阵”段代码;奇异值分解(SVD)的理解

    生成高斯随机测量矩阵 sampleRate 61 0 7 采样率 Phi 61 np random randn 256 256 u s vh 61 np linalg svd Phi Phi 61 u 256 sampleRate 将测量矩
  • 云服务器cvm & 云服务器ecs区别

    1 全称 cvm的英文全拼是 Cloud Virtual Machine xff08 云虚拟机 xff09 ecs的英文全拼是 Elastic Compute Service xff08 弹性计算服务 xff09 2 对比 云服务器cvm是
  • 远程连接腾讯云上的数据库

    一 准备工作 1 云服务器配置为windows server 2012 r2 2 远程连接云主机 下载rdp xff0c 输入win账号密码运行即可 2 在云主机上安装mysql xff08 1 xff09 下载mysql安装包 xff0c
  • 基于ubuntu18.04 VNC开机自启动

    本博客内容实现了RK3399 NanoPi NEO4的VNC的开机自启动 xff0c 以及原版桌面的显示 系统 xff1a FriendlyDesktop 最新版本 xff0d 基于Ubuntu 18 04 64位系统构建 易于开发 xff
  • Latex部分斜体变直体

    Latex斜体变为直体 rm即可 未使用之前的效果 xff08 x n 43 1 61 mathop arg min limits x alpha x D n xff09 为了将所有的小写x变为直体 xff0c 将所有的x替换为 rm x
  • Latex打花体

    Latex提供了三种花体 xff0c 注意使用时候提前导入包 xff0c 否则会报错 usepackage amsthm amsmath amssymb usepackage mathrsfs 使用的时候直接掉包即可 下面演示部分效果 xf

随机推荐

  • 遗传算法代码

    全局搜索最优算法 xff08 1 xff09 遗传算法 这里以github上的遗传算法开源库为例子 xff1a 首先我们安装GA xff08 官方说依赖库好像只支持Python 3 xff0c 但是我好像python2也安装成功了 xff0
  • ubuntu安装KVM

    ubuntu安装KVM 现在官网下载ubuntu镜像 xff0c 桌面版或者服务端都可 xff0c 这里以桌面端为例 安装之前确保磁盘有足够大的空间 xff08 这很重要 xff09 安装KVM span class token funct
  • Error: GPG check FAILED

    Error GPG check FAILED 这由于源key错误导致的dnf或者yum xff08 软件包管理器 xff09 安装软件失败 解决的方法很简单 xff0c 有些傻逼博客在那边坑人 xff0c 写的一长串解决办法都不能用 xff
  • Ubuntu彻底卸载Python

    1 查看要卸载的Python版本 若要卸载python2 xff0c 则查看命令为 python2 version 若要卸载python3 xff0c 则查看命令为 python3 version 这里我卸载python3 6 2 卸载Py
  • Ubuntu Python链接指向python3

    1 安装python3 7 sudo apt get install python3 7 2 查看python目前的指向 ls l usr bin grep python 3 删除原有的python链接 sudo rm usr bin py
  • ubuntu安装pip3

    1 安装命令 sudo apt get install python3 pip 2 查看pip3的版本以及对应的python版本 pip3 V pip 21 1 1 from usr local lib python3 7 dist pac
  • latex打双引号“ “

    latex中如果用英文输入模式的双引号键入 xff0c 则输出的结果与我们预期的不符合 xff0c 这并不是LaTeX的正确输入方式 34 test 34 输出为 xff1a 正确的输入方式为 xff1a 引号左边输入两个反引号 96 xf
  • 过拟合的原因以及解决办法(深度学习)

    过拟合 xff1a 模型在训练集上表现的非常好 xff0c 但在测试集的数据下表现很差 具体观察loss函数就是 xff0c train loss一直降低 xff0c 而test loss先降低 xff0c 而后随着epoach的增加 xf
  • Linux与MAC共享以及TimeMachine服务器的搭建

    自从添置了MBPR之后 xff0c 就发现使用Samba协议的话 xff0c Linux与MacOS之间传输速度相当不稳定 xff0c 我还一度以为是MBP的无线网卡问题 随后便尝试了一下AFP协议 xff0c 果然效果立现 xff0c 因
  • Python字符串转数字

    默认转换方式 xff1a num 61 int string 把二进制 xff0c 八进制 xff0c 十六进制转化为数字 xff0c python也提供了内置函数 xff0c 非常方便 xff0c 用法分别如下 xff1a num1 61
  • Linux根据进程名字彻底删除所有相关的子进程

    Linux有些时候kill 9进程pid xff0c 进程名字还会出现 xff0c 比如spark提交应用时的SparkSubmit 这是因为当前进程有其它子进程依赖 此时可以根据进程名字彻底删除 xff0c 这里我提供了一份模板 xff1
  • Python中Json文件的写入与读取

    字典写入Json文件 xff0c 代码如下 xff1a import json sparkConfDict 61 39 defaultMaxSplitBytes 39 defaultMaxSplitBytes 39 openCostInBy
  • Python获取当前工作目录以及改变工作目录

    import os print os getcwd 获取并打印当前工作目录 os chdir 34 目标目录 34 修改当前工作目录为目标目录
  • Linux 手动杀VNC进程

    步骤 方法一 1 查VNC进程 span class token function ps span ef span class token operator span span class token function grep span
  • 记录我重新安装ORBSLAM2和PX4的过程

    1 背景 xff1a 今天卸载了Ubuntu16 04 xff0c 重新装了一个Ubuntu18 04 xff0c 成功做完系统之后需要把之前的备份恢复 我的备份比较粗暴 xff0c 就是直接把 home里的文件都先复制到Windows下
  • 【网络干货】最全BGP路由协议技术详解

    一 BGP 的基本概念 自治系统AS xff08 Autonomous System xff09 AS 是指在一个实体管辖下的拥有相同选路策略的 IP 网络 BGP 网络中的每个 AS 都被分配一个唯一的 AS 号 xff0c 用于区分不同
  • Python正则表达式之 - ?: / ?= / ?!

    用圆括号将所有选择项括起来 xff0c 相邻的选择项之间用 分隔 但用圆括号会有一个副作用 xff0c 使相关的匹配会被缓存 xff0c 此时可用 放在第一个选项前来消除这种副作用 其中 是非捕获元之一 xff0c 还有两个非捕获元是 61
  • Python教程:无参装饰器

    一 xff1a 储备知识 1 args xff0c kwargs span class token keyword def span span class token function index span span class token
  • 面向对象:类关系(泛化/实现/依赖/关联/聚合/组合)

    泛化 泛化 xff0c 也称作继承关系 指面向对象中派生类与基类之间的关系 xff0c 一个类 xff08 称为子类 子接口 xff09 继承另外的一个类 xff08 称为父类 父接口 xff09 的功能 指ClassA为ClassB Cl
  • webpack基本概念及使用

    webpack是什么 xff0c 用来干什么 xff1f webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具 xff1b webpack的下载安装 官网文档地址 xff1a https webpack js o