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
相关推荐
gnip10 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫11 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel12 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼13 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手16 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法16 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku17 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode17 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu17 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu17 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript