Comments (10)
最近在总结前端工程化的东西,还是咱这篇较为全面,难易适中。
但是部分内容好像是之前忘记填充了,在 Webpack 和 Vite 工作流程的比较 中,没有写这块的内容。也可以删除这块的文字,避免歧义。
以下是我总结的:
Webpack 工作流程:
- 入口文件:Webpack 的入口文件指定了项目的主文件,Webpack 通过该文件找到所有的模块并构建依赖关系图。
module.exports = {
entry: './src/index.js'
};
- 加载器:Webpack 需要构建 CSS、字体、图片等各种资源,而不仅仅是 JavaScript。为此,我们需要使用加载器来处理这些资源。
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
]
}
};
- 插件:插件是用来增强Webpack功能的,它可以执行各种任务,如压缩代码、代码分离、生成HTML等。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};
- 出口:输出文件是Webpack最终生成的文件,它包含了所有的依赖项和代码。
const path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
具体流程可以参考 深入浅出 Webpack
Vite 工作流程:
- 在本地启动一个开发服务器,监听文件变化。
- 当开发人员请求页面时,Vite 服务器会在内存中编译源代码,并将结果返回给浏览器。
- Vite 会自动分析依赖关系,并加载相应的文件。
- 在打包发布时,Vite 会对代码进行优化,压缩代码体积。
from learning-vue3.
在前端工程化这一节中,是否需要加入关于 ESLint 和 Prettier ,配合 VScode 做简单的代码格式化?
from learning-vue3.
在前端工程化这一节中,是否需要加入关于 ESLint 和 Prettier ,配合 VScode 做简单的代码格式化?
考虑到这些都是非强制使用的工具,对于刚接触工程化的新同学来说可能有压力,所以我没有加进去,放在了 脚手架的升级与配置 里面才提及,因为这个阶段会开始涉及到项目开发,通过脚手架创建的模板大部分都会配套这些东西,放在这里说明我觉得可能时机正好。
from learning-vue3.
坐等群主实战部分的内容。
from learning-vue3.
感谢博主,目前我也是入行前端,慢慢敲代码,看了你的文章,通俗易懂,比官方文档的入门教程更通俗。
看累了去看看菜谱哈哈哈哈,最近我也是自己做饭,绝了哈哈哈
from learning-vue3.
感谢博主,目前我也是入行前端,慢慢敲代码,看了你的文章,通俗易懂,比官方文档的入门教程更通俗。 看累了去看看菜谱哈哈哈哈,最近我也是自己做饭,绝了哈哈哈
哈哈哈哈哈谢谢你
from learning-vue3.
- 写的太好了!作为一名只学过了 ssm 和前端三件套的小白,这篇文章基本懂了。
Runtime ,可以叫它 “运行时” 或者 “运行时环境” ,这个概念是指,的代码在哪里运行,哪里就是运行时。
“的代码”前是不是缺了啥。
- 打赏支持一下作者,优秀的文章值得点赞!欸嘿。
from learning-vue3.
- 写的太好了!作为一名只学过了 ssm 和前端三件套的小白,这篇文章基本懂了。
Runtime ,可以叫它 “运行时” 或者 “运行时环境” ,这个概念是指,的代码在哪里运行,哪里就是运行时。
“的代码”前是不是缺了啥。
- 打赏支持一下作者,优秀的文章值得点赞!欸嘿。
谢谢支持和打赏!然后这个地方应该也是那次 减少人称代词的更新 引起的,我更正啦!
from learning-vue3.
教程非常有帮助,谢谢,大佬有时间的话是否考虑出一套node+express+mongodb的教程?特别是部署这一块,比如使用iis、宝塔、pm2啥的真正做到一个能线上访问
from learning-vue3.
教程非常有帮助,谢谢,大佬有时间的话是否考虑出一套node+express+mongodb的教程?特别是部署这一块,比如使用iis、宝塔、pm2啥的真正做到一个能线上访问
我三月份换工作后一直比较忙,好久没码字了,这方面应该也蛮多人写了分享,可以先搜索看看~ 宝塔我也没有用过,服务端我还是 Linux 用的比较多,21 年在 Vite 2 和 Vue 3 刚出来的时候写过一篇博客的改版介绍 重构于Vite ,里面有介绍了一些技术栈、 CI 构建、代码同步和服务端部署的操作思路也可以看看。
因为 Node 本身具备了 Nginx 的一些功能,所以我服务器是没有用 Nginx 的,涉及到的端口转发等服务代理是通过 http-proxy 操作,有相关需要的话也可以看看它的 README 文档~
from learning-vue3.
Related Issues (20)
- 插件使用章节cnpm的registry域名更新 HOT 1
- 有没有考虑加入Pinia学习教程? HOT 3
- Comments on the pinia page HOT 3
- 谢谢作者 HOT 2
- Comments on the guide page HOT 49
- 作者你好, HOT 1
- 要不要讲一讲 pug 和 ref 糖? HOT 6
- Good tutorial~ HOT 1
- 大佬快来 HOT 2
- feat: 建议更新官方文档链接说明 HOT 2
- Comments on the typescript page HOT 25
- Comments on the plugin page HOT 1
- 这里是而??的DOM ? HOT 1
- vue3+vite谷歌可以调试吗? HOT 2
- typescript 相应写成了响应 HOT 1
- 大佬 您个人网站是用node写的后端吗 HOT 3
- vue.chengpeiquan.com无法访问 HOT 1
- 请问 https://vue3.chengpeiquan.com 这个网站是用那个UI框架做的? HOT 1
- How to contribute articles to this repo? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learning-vue3.