前端基础:node.js、npm、webpack(下)

简介: 前端基础:node.js、npm、webpack

3 前端框架

三大框架

image.png

image.png

image.png

4.3 node.js 及 yarn 安装

image.png

image.png

1.png

4.4 Webpack 配置

webpack,一个前端资源加载/打包工具

需要处理的文件类型

Html

html-webpack-plugin

脚本

babel + babel-preset-react

样式

css-loader + sass-loader

图片/字体

url-loader + file-loader

webpack常用模块

  • html-webpack-plugin
    html单 独打包成文件
  • extract-text-webpack-plugin
    样式打包成单独文件
  • CommonsChunkPlugin
    提出通用模块

webpack-dev-serve

为webpack项目提供web服务

更改代码自动刷新,路径转发

yarn add webpack-dev-server@2.9.7 --dev

解决多版本共存问题

5 React基础

视图层框架

  • 一个构建用户界面的框架
  • 声明式的框架
  • 数据驱动DOM,再用事件反馈给数据

组件化开发

  • 组件组合而不是继承
  • state && props
  • 生命周期

理解JSX

  • 一种JS扩展的表达式
  • 带有逻辑的标记语法,有别于HTML模板
  • 对样式,逻辑表达式和事件的支持

虚拟DOM

image.png

  • 对DOM(可理解为 HTML)进行模拟
  • 比较操作前后的数据差异
  • 如果有数据差异,统一操作DOM

为何使用虚拟 dom

image.png

实现原理

image.png

对于如下 js,由于引入了 react,肯定无法直接引入该 js 文件吧

image.png

这时就需要 webpack 对这些文件打包。

目录
相关文章
|
1月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
前端开发
构建工具对比:Webpack与Rollup的前端工程化实践
在现代前端开发中,前端工程化变得愈发重要。本文将对两个常用的构建工具——Webpack和Rollup进行比较,探讨它们在前端工程化实践中的特点、优势和适用场景。无论是大型应用的打包优化还是轻量级库的构建,选择适合的构建工具都能提高开发效率和项目性能。
16 1
|
1月前
|
JavaScript
npm wepack-cli --save-dev nodejs -4048 operation not permitted
npm wepack-cli --save-dev nodejs -4048 operation not permitted
12 0
|
1月前
|
JavaScript
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
48 0
|
4天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
18天前
|
资源调度 JavaScript
nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法
nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法
255 2
|
19天前
|
JavaScript
查看NodeJs版本和查看NPM版本
查看NodeJs版本和查看NPM版本
19 0
查看NodeJs版本和查看NPM版本
|
21天前
|
JavaScript iOS开发 MacOS
掌握NVM、NRM和NPM:Node.js开发的利器
掌握NVM、NRM和NPM:Node.js开发的利器
29 0
|
21天前
|
资源调度 JavaScript 开发工具
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
58 0
|
22天前
|
前端开发 JavaScript 安全

热门文章

最新文章

相关产品

  • 云迁移中心
  • 推荐镜像

    更多