webpack打包工具系列

简介: webpack打包工具系列

👣 shelljs

Node 编写 bash 脚本的解决方案

shelljs git 地址 🔥

安装: npm i shelljs
安装 TS 编译: npm i @types/shelljs -D

ShellJS 删除方式的:
ShellJS: rm() 删除文件, rm('rf', ) 删除文件夹

🌈 chalk

chalk git 地址🔥

添加字体颜色的库

⏰ SemVer

语义化版本 (SemVer),【软件版本号规范】。
semver 初识 🐶

其中,pack.json ^ 与 ~ 的区别 指定版本号

(1)指定版本:比如"vue": "2.5.2",表示安装2.5.2的版本

(2)波浪号~+指定版本:比如 "vue": "~2.5.2",
    表示安装2.5.x的最新版本(不低于2.5.2),但是不安装2.6.x,
    也就是说安装时,不改变大版本号和次要版本号

(1)^+指定版本:比如 "vue": "^2.5.2",表示安装2.5.2及以上的版本,
     但是不安装3.0.0,也就是说安装时不改变大版本号

✂️ rimraf

快捷且方便的删除node_modules的方法

npm install rimraf -g

🚗 Ora

主要用来实现node.js命令行环境的loading效果,和显示各种状态的图标等

var spinner = ora('building for ' + process.env.NODE_ENV + '...')
spinner.start()

ora 入门

相关文章
|
3月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
83 1
|
3月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
67 0
|
3月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
43 0
|
12天前
|
JavaScript 前端开发 CDN
webpack打包发布~
【8月更文挑战第7天】
25 1
|
4天前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
12 0
|
7天前
webpack——打包去除console
webpack——打包去除console
11 0
|
1月前
|
缓存 JSON 前端开发
Webpack打包优化实践
【7月更文挑战第17天】Webpack的打包优化是一个持续的过程,需要开发者根据项目的实际情况选择合适的优化策略。通过拆分代码、压缩代码、使用Tree Shaking、优化加载器配置、利用缓存以及进行性能分析,我们可以有效提升Webpack的打包效率和应用的加载
|
2月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
46 3
|
3月前
|
前端开发 JavaScript 开发者
深入了解Webpack:前端模块打包工具
深入了解Webpack:前端模块打包工具
68 1
|
3月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
52 0