01 —— Webpack打包流程及一个例子

静态模块打包工具

静态模块:html、css、js、图片等固定内容的文件

打包:把静态模块内容,压缩、转译等

Webpack打包流程

  • src中新建一个index.js模块文件;然后将check.js模块内的两个函数导入过来,进行使用
  • 下载webpack webpack-cli 到当前项目中

npm i webpack webpack-cli --save-dev

--save-dev 标记这俩包在开发环境下使用

  • package.json里配置局部自定义命令
javascript 复制代码
"scripts":{
    //自定义命令名:真正在终端里要触发的命令
    "build":"webpack"
},
  • 运行打包命令

npm run build

  • 最后webpack会把打包的内容输出到dist目录,默认产生一个main.js的出口文件

webpack默认入口文件src/index.js;默认出口文件dist/main.js

一个使用Webpack打包的例子

需求:封装utils包,校验手机长度和验证码长度,在src/index.js中使用并打包观察

1.先生成一个package.json文件 ------ npm init -y

2.新建src文件,在其下建一个utils目录和index.js文件,utils文件夹下建一个check.js文件

check.js

javascript 复制代码
//封装校验手机长度和校验验证码长度的两个函数 并采用ECMAScript标准的命名导出(按需加载)

export const checkPhone = phone => phone.length === 11
export const checkCode = code  => code.length === 6

index.js

javascript 复制代码
//{同名变量}
import { checkPhone,checkCode} from './utils/check.js'

console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))

3.npm i webpack webpack-cli --save-dev 下载俩软件包

4.package.json里配置局部自定义命令

  1. npm run build
相关推荐
止观止10 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall11 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴17 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix4 小时前
AI辅助网页设计:从图片到代码的实践探索
前端