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

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

1 Node.js

image.png

1.1 简介

  • 定义
    JS的服务端运行环境
  • 用途
    构建工具webpack的环境依赖
  • 特点
    单线程、异步编程
  • 应用场景
    低运算、高I/O

Nodejs的包管理工具:

2 npm

安装

image.png

npm init

image.png

3 Webpack

  • 设计思想
    require anything
  • 加载方式
    各种loader插件
  • 编译方式
    commonjs模块-> function类型模块
  • 官方文档
    http://webpack.github.io/docs/

安装

  • sudo npm install -g webpack

image.png

  • npm install webpack@1.15.0 --save-dev
  • webpack -v

webpack.config.js

●entry : js的入口文件

●externals :外部依赖的声明

output: 目标文件

●resolve :配置别名

●module :各种文件,各种loader

●plugins :插件

Webpack Loaders

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

  • html
    html-webpack-plugin / html-loader
  • js
    babel-loader + babel-preset-es2015
  • css
    style-loader + css-loader
  • image + font
    url-loader

Webpack常用命令

webpack

webpack -p

webpack --watch

webpack --config webpack.config.js

热加载

webpack-dev-server

作用:前端开发服务器

特色:可以在文件改变时,自动刷新浏览器

安装: npm install webpack-dev-server一save-dev

配置: webpack-dev-server/client?http://localhost:8088

使用: webpack-dev-server --port 8088 --inline


webpack-dev-server --contentbase -src --inline --hot(热加载启动命令)

image.png

image.png

image.png

  • 接着执行 webpack 进行打包

1.3数据接口设计

请求和响应

image.png

2.1页面加载过程

  • 资源加载过程
  • image.png
  • URL 结构
  • image.png
  • DNS 查询
  • image.png
  • dns-prefetch
  • image.png
  • image.png
目录
相关文章
|
12天前
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
33 1
|
18天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
47 0
|
1月前
|
JavaScript 内存技术
node与npm版本对应关系以及使用nvm管理node版本
node与npm版本对应关系以及使用nvm管理node版本
152 0
|
29天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
30天前
|
前端开发 JavaScript
前端Webpack5高级进阶课程
本套视频教程主要内容包含React/Vue最新版本脚手架分析、基于Webpack5编写自己的loader和plugin等,让你开发时选择更多样,最后,用不到一百行的代码实现Webpack打包。通过本套视频教程的学习,可以帮你彻底打通Webpack的任督二脉,技术水平更上一层楼,在开发项目的道路上畅通无阻
13 3
前端Webpack5高级进阶课程
|
1月前
|
内存技术
node版本与npm版本不对应的解决方案
node版本与npm版本不对应的解决方案
25 0
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript API
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
64 0

推荐镜像

更多