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
相关推荐
gnip1 天前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人1 天前
Firefox自定义备忘
前端·firefox
乖女子@@@1 天前
css3新增-网格Grid布局
前端·css·css3
伐尘1 天前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e1 天前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost1 天前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati1 天前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪1 天前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme1 天前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼1 天前
前端面试中值得关注的js题
前端·面试