江苏省住房和建设部网站首页,佛山网站优化多少钱,长沙做详情页的公司,可以做科学模拟实验的网站目录 1.webpack
2.vite是什么
3.使用vite创建项目
4.最后总结 #x1f43c;webpack
简单来说#xff0c;Webpack是一个打包工具。
站在2018年的角度#xff0c;成为一个优秀的前端工程师#xff0c;除了要会写页面样式和动态效果之外#xff0c;还需要会用主流的单页…目录 1.webpack
2.vite是什么
3.使用vite创建项目
4.最后总结 webpack
简单来说Webpack是一个打包工具。
站在2018年的角度成为一个优秀的前端工程师除了要会写页面样式和动态效果之外还需要会用主流的单页面框架、Node.js、简单的前端的性能优化等等。加上现在一部分服务器的逻辑移到了前端上所以实际上前端的复杂度也是提升了很多。
而Webpack可以帮助我们完成一些任务。比如js压缩、css压缩、编译模板文件等等从而减少前端的工作量。当然Webpack功能很强大能帮我们完成的工作远远不止这些。
下面让我们慢慢了解Webpack吧~ 二、安装
① Webpack的运行需要依赖Node.js因此需要先安装Node.js。
中文网下载地址下载 | Node.js 中文网
安装完成之后在命令行窗口输入下面两行命令若有出现版本号则安装成功。
$ node -v
$ npm -v② 接着就可以通过npm一个基于Node.js的包管理工具来安装Webpack咯~
首先通过下面的一行命令先生成package.json
$ npm init
③ 接着就能通过npm完成webpack的安装啦
因为npm的源在国外所以安装速度可能比较慢。建议大家可以用淘宝的npm镜像。但是要注意的一点是淘宝npm镜像中有一些包会不太一样一般来说不影响使用
淘宝 NPM 官网淘宝 NPM 镜像
通过下面这行代码即可完成cnpm的配置
$ npm install -g cnpm --registryhttps://registry.npm.taobao.org
通过下面两行代码即可完成webpack的安装
// 要是不想使用淘宝的npm镜像就用npm代替cnpm
$ cnpm install -D webpack
$ cnpm install -D webpack-cli
④ 安装完之后在package.json同级目录新建一个webpack.config.js文件。然后再在package.json中增加一个“scripts”配置项。
// 这是package.json
{name: zhihu_demo,version: 1.0.0,description: ,main: index.js,scripts: {build: webpack --config webpack.config.js},repository: {type: git,url: githttps://github.com/rehellinen/zhihu_demo.git},author: ,license: ISC
}
接着在命令行中输入下面的这行代码就可以启动webpack啦。
$ npm run build
但是因为我们的webpack.config.js是空的因此运行时会报错。具体配置会在下一节课开始讲。 三、一些必要的解释
到这里为止大家可能会有几个问题。
Q1命令行窗口怎么打开
A1windows系统在左下角的搜索框输入cmd即可 Q2package.json中的scripts有什么用
A2如上面的实例当我们输入“npm run build”就相当于是通过npm脚本执行了“webpack --config webpack.config.js”。
那为什么我们不直接在命令行中输入后面的那行代码呢因为上面的实例代码中webpack是局部安装的因此在环境变量中不能找到webpack直接输入那行代码会提示找不到webpack。
那为什么npm的script就能运行呢我们通过npm安装的包都会放在node_modules的目录中而这个目录中有一个叫.bin的子目录在这个目录中放置有webpack的可执行文件。npm的script默认会去.bin中寻找因此能够运行。
这个问题也能通过全局安装解决-g表示全局安装。
$ cnpm install -g webpack
$ cnpm install -g webpack-cli Q3为什么推荐使用局部安装
A3我们写完的代码可能会给其他人用而我们不能保证其他人也全局安装了webpack因此局部安装webpack比较保险。
vite是什么
Vite由两个主要部分组成
dev server利用浏览器的ESM能力来提供源文件具有丰富的内置功能并具有高效的HMR生产构建生产环境利用Rollup来构建代码提供指令用来优化构建过程
Vite作为一个基于浏览器原生ESM的构建工具它省略了开发环境的打包过程利用浏览器去解析imports在服务端按需编译返回。同时在开发环境拥有速度快到惊人的模块热更新且热更新的速度不会随着模块增多而变慢。因此使用Vite进行开发至少会比Webpack快10倍左右。
1.2 、Vite的主要特性
Instant Server Start —— 即时服务启动Lightning Fast HMR —— 闪电般快速的热更新Rich Features —— 丰富的功能Optimized Build —— 经过优化的构建Universal Plugin Interface —— 通用的Plugin接口Fully Typed APIs —— 类型齐全的API
1.3、 主流构建工具对比
构建工具指能自动对代码执行检验、转换、压缩等功能的工具。常见功能包括代码转换、代码打包、代码压缩、HMR、代码检验。构建工具也随着前端技术的发展从Browserify、Gulp到Parcel从Webpack到Rollup一直到最近比较火的面向非打包的Snowpack和Vite。
Browserify
预编译模块化方案文件打包工具Browserify基于流方式干净灵活遵循commonJS规范打包JS可引入插件打包CSS等其他资源非原生能力
Gulp
基于流的自动化构建工具工程化配置复杂度高偏向编程式需要定义task处理构建支持监听读写文件可搭配Browserify等模块化工具来使用
Parcel
极速打包工程化极速0配置零配置但造成了配置不灵活内置常见场景的构建方案及其依赖无需再次安装babel等以html入口自动检测和打包依赖不支持SourceMap无法Tree-shaking
Webpack
预编译模块化方案工程化大而全通过配置文件达到一站式配置loader进行资源转换功能全面cssjsiconfront插件丰富灵活扩展社群庞大大型项目构建慢
Rollup
基于ES6打包模块打包工具Tree-shaking打包文件小且干净执行效率更高更专注于JS打包
Snowpack
基于ESM运行时编译工程化ESM运行时无需递归循环依赖组装依赖树默认输出单独的构建模块未打包可选择不同打包器webpack、rollup等
Vite
基于ESM运行时打包借鉴了Snowpack生产环境使用Rollup集成度更高相比Snowpack支持多页面、库模式、动态导入自动polyfill等使用vite创建项目
使用 NPM:
$ npm init vitelatest使用 Yarn:
$ yarn create vite使用 PNPM:
$ pnpm create vite然后按照提示操作即可
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如要构建一个 Vite Vue 项目运行:
# npm 6.x
npm init vitelatest my-vue-app --template vue# npm 7, 需要额外的双横线
npm init vitelatest my-vue-app -- --template vue# yarn
yarn create vite my-vue-app --template vue# pnpm
pnpm create vite my-vue-app -- --template vue查看 create-vite 以获取每个模板的更多细节vanillavanilla-tsvuevue-tsreactreact-tspreactpreact-tslitlit-tssveltesvelte-ts。
社区模板#
create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具使用社区模版来搭建项目。
npx degit user/project my-project
cd my-projectnpm install
npm run dev如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。
npx degit user/project#main my-projectindex.html 与项目根目录#
你可能已经注意到在一个 Vite 项目中index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的在开发期间 Vite 是一个服务器而 index.html 是该 Vite 项目的入口文件。
Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 script typemodule src... 这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 script typemodule 和引用 CSS 的 link href 也能利用 Vite 特有的功能被解析。另外index.html 中的 URL 将被自动转换因此不再需要 %PUBLIC_URL% 占位符了。
与静态 HTTP 服务器类似Vite 也有 “根目录” 的概念即服务文件的位置在接下来的文档中你将看到它会以 root 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析因此你可以像在普通的静态文件服务器上一样编写代码并且功能更强大。Vite 还能够处理依赖关系解析处于根目录外的文件位置这使得它即使在基于 monorepo 的方案中也十分有用。
Vite 也支持多个 .html 作入口点的 多页面应用模式。
指定替代根目录#
vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。
命令行界面#
在安装了 Vite 的项目中可以在 npm scripts 中使用 vite 可执行文件或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts
{scripts: {dev: vite, // 启动开发服务器build: vite build, // 为生产环境构建产物serve: vite preview // 本地预览生产构建产物}
}可以指定额外的命令行选项如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。
使用未发布的功能#
如果你迫不及待想要体验最新的功能可以自行克隆 vite 仓库 到本地机器上然后自行将其链接将需要 pnpm
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link # you can use your preferred package manager for this step然后回到你的 Vite 项目并运行 pnpm link vite或者使用全局的软链来链接 vite。重新启动开发服务器来体验新功能吧
个人总结个人才是刚入门的前端萌新还是希望多多支持哈哈
