程序员经验分享-hwhale

使用 webpack 对项目进行打包发布

2023-11-14

打包发布

1. 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

2. 配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

 
 

--model 是一个参数项，用来指定 webpack 的 运行模式 。production 代表生产环境，会对打包生成的文件进行 代码压缩 和 性能优化 。
注意：通过 --model 指定的参数项，会 覆盖 webpack.config.js 中的 model 选项。

3. 把 JavaScript 文件统一生成到 js 目录中
 

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

 4. 把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

 

 5. 自动清理 dist 目录下的旧文件

为了在每次打包发布时 自动清理掉 dist 目录中的旧文件 ，可以安装并配置 clean-webpack-plugin 插件：

 

相关内容发布：

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~

 

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

2023年前端入门到精通

WEBPACK

前端

nodejs

使用 webpack 对项目进行打包发布 的相关文章

随机推荐

  • Linux SPI 驱动实验

    目录 Linux 下SPI 驱动框架简介 SPI 主机驱动 SPI 设备驱动 SPI 设备和驱动匹配过程 I MX6U SPI 主机驱动分析 SPI 设备驱动编写流程 SPI 设备信息描述 SPI 设备数据收发处理流程 硬件原理图分析 试验

  • k8s中无法获取到nginx-ingress的客户端真实ip地址x-forwarded-for

    1 查看阿里云的nginx ingress配置文档https help aliyun com document detail 42205 html 容器K8s配置方案 如果您的服务部署在K8s上 K8s会将真实的客户端IP记录在X Orig

  • 学习 Python 之 Pygame 开发魂斗罗（十一）

    学习 Python 之 Pygame 开发魂斗罗 十一 继续编写魂斗罗 1 改写主类函数中的代码顺序 2 修改玩家初始化 3 显示玩家生命值 4 设置玩家碰到敌人死亡 5 设置敌人子弹击中玩家 6 修改updatePlayerPositio

  • JavaEE大作业---基于springboot+Mybatis-plus+jsp+docker部署的作业管理系统

    经过了一个学期的JavaEE课程的学习 我对spring框架有了更加深入的了解 对于作业管理系统也在不断地优化 在这里做一个总结 接下来我将从几个部分来介绍这个项目 项目功能性需求 MySql数据库中表的结构 项目中使用到的关键技术 项目整

  • 记一次阿里云盘扩容遇到的坑

    背景 生产环境使用了阿里云并且以mongo作为图片服务器 由于业务发展需要数据盘的400G的容量已经用到81 所以需要对磁盘做无损扩容操作 操作步骤 在控制台上扩容数据盘的磁盘空间 官方文档 https help aliyun com do

  • 100天精通Python（可视化篇）——第100天：Pyecharts绘制多种炫酷漏斗图参数说明+代码实战

    文章目录 专栏导读 一 漏斗图介绍 1 说明 2 应用场景 二 漏斗图类说明 1 导包 2 add函数 三 漏斗图实战 1 基础漏斗图 2 标签内漏斗图 3 百分比漏斗图 4 向上排序漏斗图 5 标准漏斗图 书籍推荐 专栏导读 本文已收录于

  • 发布vue 的npm包

    1 本地启动一个vue项目 2 在src文件下新建index js import xxx from components xxx vue export default xxx 3 在src文件夹同级新建index js xxx 代表你的模块

  • 在一款芯片中多个时钟域非常常见，跨时钟域检查至关重要。本篇记录的是CDC跨时钟域的基础概念。

    CDC Clock Domain Crossing 跨时钟域 在一款芯片中多个时钟域非常常见 跨时钟域检查至关重要 本篇记录的是CDC跨时钟域的基础概念 时钟域clock domain 以寄存器捕获的时钟来划分时钟域 单时钟域single

  • STL空间配置器allocator详解

    转自 https blog csdn net xy913741894 article details 66974004 stl六大组件简介 我们知道 stl有容器 空间配置器 适配器 迭代器 仿函数以及算法这6个组件 它们六者关系大概如下

  • Ubuntu 22报错：PAM unable to dlopen(pam_tally2.so)

    ubuntu 22安装好后 普通用户一直登录不上 查看 var log auth log发现报错 Aug 18 17 02 02 xx sshd 388903 PAM unable to dlopen pam tally2 so lib s

  • linux如何发送查收邮件的详解

    一 linux用户发送给linux中的其它用户 1 使用命令 yum install sendmail y安装sendmail软件 2 使用yum install mailx y安装 mailx软件 3 使用命令systemctl star

  • 新安装的kali-linux 2022.1无法与其他虚拟机之间互相ping同

    新安装了kali 然后发现虚拟机无法与其他虚拟机互相ping同 也无法被ping 首先虚拟机之间都是nat模式 所有此时要查看不能ping同的虚拟机之间是否在同一个网段 此时要查看你的主机中网络连接的VMnet8的网段 VMnet8为nat

  • 纯Asp实现微信支付

    微信支付的程序文件需要3个 1 生成二唯码供用户扫描的网页 2 支付回调URL 就是当用户扫描二唯码后 微信会调用这个回调用URL 3 微信支付异步通知回调地址 当用户在微信上确认支付后 接收微信支付异步通知 其中第 2 3 个文件需要在支

  • 什么是哈希函数

    什么是hash函数 哈希函数 Hash Function 也称为散列函数 给定一个输入x 它会算出相应的输出H x 哈希函数的主要特征是 输入x可以是任意长度的字符串 输出结果即H x 的长度是固定的 计算 H x 的过程是高效的 对于长度

  • 经验之谈

    谈编程 的确而是一个复杂的问题 我只是一个菜鸟 甚至连菜鸟都算不上 只是喜欢代码而已 看看不同的人写不同的代码吸收他人的智慧之光也是一种享受 网络中精英辈出 什么jsp asp php java c c 真的太多了 需要学的东西确实太多了

  • 安卓报错 Failed to commit install session

    Installation failed due to Failed to commit install session 2076835843 with command cmd package install commit 207683584

  • 27. 移除元素

    Swift func removeElement nums inout Int val Int gt Int 将数据声明为var类型 否则无法对其进行操作 var nums nums 返回值 var count nums count 循环次

  • 数据链路层的主要功能

    数据链路层主要功能 主要功能概述 数据链路层的三个基本问题 1 封装成帧 2 透明传输 3 差错检测 MAC寻址 链路层向网络层提供的服务 1 无确认的无连接服务 2 有确认的无连接服务 3 有确认的面向连接服务 其他知识点 主要功能概述

  • 启动项目报错 Error: listen EADDRINUSE: address already in use :::3301

    服务端启动端口报错Error listen EADDRINUSE address already in use 3301 在宝塔运行node项目时报错 提示已经有3301端口了 现在我们可以找到线程然后关闭就行了 第一步 通过端口号找到线程

  • 使用 webpack 对项目进行打包发布

    打包发布 1 为什么要打包发布 项目开发完成之后 需要使用 webpack 对项目进行打包发布 主要原因有以下两点 开发环境下 打包生成的文件存放于内存中 无法获取到最终打包生成的文件 开发环境下 打包生成的文件不会进行代码压缩和性能优化

热门标签