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
相关推荐
0wioiw013 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠37 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯1 小时前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调1 小时前
记一次 Vite 下的白屏优化
前端·css
1undefined21 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong2 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹2 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598242 小时前
vue3源码解析:依赖收集
前端·vue.js