NodeJs
NodeJs = JavaScript执行环境+JavaScript扩展的功能。
一个可以运行JavaScript的平台，基于Chrome JavaScript V8引擎，并且对ECMAScript语言进行了增强，使ECMAScript具有服务器语言开发的能力（操作文件，读取系统信息，网络等。。。）；
简单理解NodeJs就是一个可以让JavaScript脱离浏览器还能执行的平台,并且这个平台对JavaScript功能进行了增强。
（1）下载NodeJs
中文地址：nodejs.cn/download/
（2）DOS命令
DOS命令是windows系统中自带的命令行操作系统.进入命令行： win+R 在运行框中输入 cmd 再回车
e: 切换盘符（切换到E盘）
e:
cd 进入指定的文件夹
cd 文件夹名 进入指定的目录
cd ./ 进入当前目录（省略不写）
cd ../ 进入上一级目录
cd / 进入根目录
dir 显示当前文件夹中的文件和目录列表
cls 清除屏幕
ctrl+c 中断执行
命令行的两种模式
第一种: DOS系统模式 , 只能够运行DOS命令
（c: cd dir cls ...）
标识： C:\user\administrator
第二种: node模式： 只能运行JS代码
标识： >
从 DOS模式切换到 Node模式：
命令： node 回车
从Node模式切换到DOS模式：
命令： .exit
快捷键： ctrl+c 按多次
（一）客户端编程语言和服务器编程语言
客户端编程语言是运行在客户端浏览器里面。 例如：html，css, javascript
服务器编程语言是运行在服务器上。 例如：java php .net nodejs
(二)NodeJs与JavaScript区别
NodeJs ：一个可以运行JavaScript的平台，基于Chrome JavaScript V8引擎，并且对ECMAScript语言进行了增强，使ECMAScript具有服务器语言开发的能力（操作文件，读取系统信息，网络等。。。）；
JavaScript：一门编程语言，只要有ECMAScript引擎就能运行，各大浏览器都有自己的JavaScript引擎，并且如果ECMAScript运行在浏览器中，浏览器对ECMAScript加入了浏览器和文档操作的接口（方法）；
简单理解：JavaScript运行需要JavaScript引擎，JavaScript引擎可以在浏览器(IE、Firefox、Chrome)中，也可以独立出来（NodeJs），运行在浏览器中的JavaScript，为客户端JavaScript，而NodeJs称为服务端JavaScript。 JavaScript运行在不同的平台，责任也不一样，浏览器中JavaScript主要是操作BOM和DOM，而NodeJs则是具有服务端语言处理能力（处理网络请求，保存数据到数据库）；
（三）运行NodeJs
1.cmd命令行
NodeJs提供了REPL模式(cmd命令行)( Read-Evaluate-Print-Loop,输入 -求值 -输出 -循环),即交互式命令行解析器），可以直接在命令行，编写NodeJs代码，适合检验和学习nodejs。
（1）win键(田字符)+R（运行命令框），输入cmd //打开终端
（2）输入：node+回车； //切换node模式
（3）输入：js代码+回车，查询运行效果； //执行js代码
2.js文件方式
(1)新建一个js文件，然后编写简单的js代码
(2)命令行运行
//首先让命令行导向到执行文件的目录下面
//node js文件名
(四)NodeJs模块基础
NodeJs采用模块方式来管理和组织代码，NodeJs的所有的功能都存在每个模块中。
模块:一个具有特定功能的文件就是一个模块，模块之间可能存在一定的依赖关系，使用模块可以很好的把这些依赖关系整合起来。
有了模块，我们就可以非常方便的使用这些模块，因为模块总是完成了特定功能，如果需要修改模块中的功能，那么需要修改这个自己的模块文件即可，模块独立与每一个文件中，不影响模块的代码。
JS中的模块有共性，模块的功能代码都是在一个函数中。
1、模块中定义变量都是局部变量。
2、模块定义在函数，也是局部。
3、模块有一个模块对象。包含moduleId(模块名)、exports（导出对象）
4、如果模块中需要暴露方法或属性给外部使用，那么就执行往exports对象上面添加。
5、使用一个模块用require(“moduleId”),该方法返回的是模块对象的exports对象。
var a = require(“./a.js”);
a.xxx // 等同于模块中exports.xxx.
（五）自定义模块
一个JS文件就是一个模块，所以定义一个模块，只需要新建一个JS文件即可。
//a.js
let a=1
function fun() {
console.log("fun");
}
//非常重要，导出模块功能（供外部使用）
exports.a=a
exports.fun=fun
//第二种写法
let a=1
function fun() {
console.log("fun");
}
module.exports={
a,
fun
}
虽然我们在js定义了两个方法，但是这个两个方法只能在当前模块中使用，因为模块是独立的（内部的变量和函数只能在该模块使用），所以我们可以使用模块内的exports对象（导出对象）输出模块中功能供外部使用.
一个模块，一旦定义完成后，我们就可以使用这些模块。首先，你需要编写一个新的文件（模块），来使用a.js模块。使用模块，通过require(“模块”)
//b.js
let a=require("./a")
a.fun()
console.log(a.a);
输出：fun；1
一个文件就是一个模块，编写这个模块中的代码，实际上都写在一个函数中，这样就保证了局部变量，模块独立，不会对外部模块造成影响。
function（exports，require，module，__filename，__dirname）{
let a=1
function fun() {
console.log("fun");
}
exports.a=a
exports.fun=fun
}
require函数
require(moduleId)函数用于在当前模块中加载和使用别的模块，传入一个模块名，返回一个模块导出对象。
.是相对于当前目录，模块文件路径的js后缀可以省略
被引入的模块分为三种：文件模块第三方模块
系统模块
注意：
1）引入模块文件有语法错误时会报错
2）引入模块不存在时会报错
3）重复引入模块只执行一次
4）在require函数引入模块时，可以省略扩展名 .js .json .node 不写。
exports导出对象
exports对象是当前模块的导出对象，用于导出模块公有方法和属性。别的模
块通过require函数使用当前模块时得到的就是当前模块的exports对象。
注意：
1）exports 等同于 module.exports
2）exports是一个对象，可以对它添加属性和方法
module模块对象
module对象可以访问到当前模块的一些相关信息，但最多的用途是替换。当前模块的导出对象（module.exports={}）。模块导出对象默认是一个普通对象。
exports和module.exports的区别
exports仅仅是引用了module.exports. 但是真正暴露的对象为module.exports对象
模块初始化
一个模块中的JS代码仅在模块第一次被使用时执行一次，并在执行过程中初始 化模块的(exports)导出对象。之后，缓存起来的导出对象被重复利用。
模块导入
(1)核心模块
核心模块，是由NodeJs平台提供的模块，也可以称为“系统模块”。
导入核心模块的规则：不以..或.和/开始的标识符。
(2)文件模块
以..或.和/开始的标识符，这里都被当做文件模块来处理。let hello = require(“./hello”);
node_modules文件夹
node_modules文件夹在nodejs中是一个特殊的文件夹，通过它的名字就可以看出，该文件夹也是用于存放node模块。
如果一个模块不是一个系统模块，也不是一个文件模块，那么就会在node_modules文件夹下进行操作。
console.log(module.paths);//node_modules会查找的目录。
[
'C:\\Users\\Administrator\\Desktop\\新建文件夹\\node_modules',
'C:\\Users\\Administrator\\Desktop\\node_modules',
'C:\\Users\\Administrator\\node_modules',
'C:\\Users\\node_modules',
'C:\\node_modules'
]
当前文件目录下的node_modules目录。
父目录下的node_modules目录。
父目录的父目录下的node_modules目录。
沿路径向上逐级递归，直到根目录下的node_modules目录。
环境变量配置的全局模块目录中。
模块后缀名
require()在分析标识符的过程中，会出现标识符中不包含文件扩展名的情况。CommonJS模规范也允许在标识符中不包含文件扩展名，这种情况下，Node会按js、json、node的次序补足扩展名，依次尝试。
简单理解：如果模块的后缀名为js、json、node那么可以不写。
包
JS模块的基本单位是单个JS文件，但复杂些的模块往往由多个子模块组成。为了便于管理和使用，我们可以把由多个子模块组成的大模块称做包，并把所有子模块放在同一个目录里。
组成一个包的所有子模块中，需要有一个入口模块，入口模块的导出对象被作为包的导出对象。
默认包中的入口模块为index.js，也可以在包中新建一个package.json包描述文件，设置main属性值为模块的入口。
package.json
{
main:”./hello.js” //模块的入口
}
Package.json 属性说明
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。（模块也会依赖其他模块。）
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上(代码仓库 ， git,svn版本控制工具)。
main - main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require("express")。
keywords - 关键字，发布到npm后，供其他人搜索
创建包描述文件的命令
npm init 命令，帮助我们创建一个package.json
NPM
Npm(Node Package Manager): Node包(模块)管理工具，借助NPM，可以帮助用户快速安装和管理依赖包，这样我们就可以很方便的使用来自全球Node开发者提供的包了。
npm 安装 Node.js 模块语法格式如下：
npm install
Npm 常用命令
1）npm init 生成package.json文件
2）npm i 包名 下载安装包 下载包并保存到运行依赖
3）npm i 包名 -S | --save 下载包并保存到运行依赖
4）npm i 包名 -D | --save-dev 下载包并保存到开发依赖
5）npm i 包名 -g | -global 全局安装,安装的是命令
6）npm view 包名 versions 查看包所有的版本信息
如果安装固定版本的包 npm i 包名@版本号
CNPM
CNPM是taobao提供的一个完整 npmjs.org 镜像，cnpm与npm的内容每10分钟会同步一次。
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm:
cnpm install <模块名>
Webpack
webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，是一种前端资源构建工具，在webpack看来，前端所有资源文件（js、json、css、img、less、typeScript、等等】）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack的5个核心概念
Entry
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）
Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
Plugins
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
Mode
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
| 选项 | 选项 |
|---|---|
| development | 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。代码本地调试环境 |
| production | 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。优化线上环境。 |
webpack使用步骤
安装步骤
1）创建项目文件夹，初始化生成 package.json
yarn init // 创建 package.json
2）本地安装 webpack 和 webpack-cli
yarn add webpack@5.12.1 webpack-cli@4.3.1 -D // 本地安装
使用步骤
1）在项目根目录创建 webpack.config.js文件。
2）项目根目录创建src文件夹，里面创建文件 index.html 和 index.js。
3)从当前目录进入终端，执行如下打包命令,此打包命令会自动找到 webpack.config.js 配置文件，按照里面的配置打包
npx webpack // 打包完成 会在dist目录中生成打包后的文件
4）Webpack.config.js 文件配置如下
/*
webpack配置
*/
const path = require('path') // 引入node内置模块path 处理文件路径
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: 'bundle.js' // 输出文件名
},
// 模式： development: 开发模式 production: 生产模式
mode: 'development'
}
5）在 index.html中，引入打包后的结果 bundle.js, 浏览器打开index.html开效果
核心loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
（一）加载css
1）下载对应的loader
yarn add style-loader css-loader -D
2）配置loader
// loader配置
module: {
rules: [
{
test: /\.css$/, // 匹配所有.css文件
use: [
'style-loader', // 创建style标签 把css插入html的head内
'css-loader' // 解析加载css到js中（把css打成字符串）。
]
}
]
}
（二） 加载less
1）下载对应的loader
yarn add less-loader less -D // style-loader css-loader 前面处理css下载过了
2）配置loader
// loader配置
module: {
rules: [
{
test: /\.less$/, // 匹配所有.less文件
use: [
'style-loader', // 创建style标签 把css插入html的head内
'css-loader', // 解析加载css到js中（把css打成字符串）。
'less-loader', // 编译less为css
]
}
]
}
(三)加载img
1.在css中加载img
1）下载对应loader
yarn add url-loader file-loader -D
2）配置loader
// loader配置
module: {
rules: [
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
name: '[hash:16].[ext]', // 图片输出的名字hash长度16位 默认32位
limit: 10 * 1024, // 小于10kb base64处理
// 关闭url-loader的es Module 使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析 不关闭会报错
esModule: false,
}
}
]
}
2.在html中加载img
1）下载对应loader 和 处理html的插件
yarn add html-loader html-webpack-plugin@4.5.0 -D
2）配置loader
const HtmlWebpackPlugin = require('html-webpack-plugin') // 处理html的插件
// loader配置
module: {
rules: [
{
test: /\.html$/, // 处理html中引入img
loader: 'html-loader'
},
]
}
3）配置插件
plugins: [
// 处理html
new HtmlWebpackPlugin({
template: './src/index.html' // 把index.html复制到dist中 自动引入资源文件
})
]
（四）加载字体图标
1）下载对应loader
yarn add file-loader -D
2）配置loader
{
test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
loader: 'file-loader',
options: {
name: '[hash:16].[ext]', // 输出名字
outputPath: 'fonts' // 输出路径
}
}
（五）编译es6到es5
1）下载对应依赖模块
yarn add babel-core babel-loader@7.1.5 babel-preset-es2015 -D
2）配置loader
{
test: /\.js$/,
loader: 'babel-loader', // loader 编译es6为es5
exclude: /node_modules/ // 排除
}
3）在项目根目录 创建 .babelrc 文件, 内容如下。
{
"presets": [
"es2015"
]
}
插件plugins
1）下载
yarn add 插件名 -D
2）引入
const 变量 = require(‘插件名’)
3）使用配置
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 配置
plugins: [
// 处理html 把index.html复制到dist中 自动引入资源文件
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new MiniCssExtractPlugin({ // 提取css
filename: 'css/[name].css' // 重命名输出的css
}),
new OptimizeCssAssetsWebpackPlugin() // 压缩css
]
开发服务器devServer
1)局部安装
yarn add webpack-dev-server@3.11.1 -D
2)配置
// 开发服务器
devServer: {
contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
compress: true, // 启动gzip
port: 666, // 端口
open: true, // 自动打开服务
publicPath: ‘/’
}
3)启动
npx webpack serve
完整例子
/**
* webpack配置
*/
const path = require('path') // node内置处理路径的模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包html的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css
// console.log('当前环境:', process.env.NODE_ENV)
// 暴露出去
module.exports = {
// 入口
entry: './src/js/index.js',
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
publicPath: './', // 找资源 自己拼接这个路径
},
// 配置loader
module: {
rules: [
// css
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' // 查找静态资源路径
}
},
'css-loader',
'postcss-loader', // 处理css兼容性
]
},
// less
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', // 处理css兼容性
'less-loader'
]
},
// css中图片
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
// 对loader进行额外的配置
options: {
name: '[hash:16].[ext]', // 输出的名字
limit: 10 * 1024, // 大小限制
outputPath: 'img', // 输出路径
esModule: false, // 和html引入图片的插件有冲突 必须配置这个
}
},
// html中图片
{ test: /\.html$/, loader: 'html-loader' },
// 字体图标
{
test: /.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[hash:16].[ext]', // 输出名字
outputPath: 'fonts', // 输出路径
}
},
// es6 -> es5
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/, // 排除
}
]
},
// 模式
mode: process.env.NODE_ENV === 'dev' ? 'development' : 'production',
// 插件
plugins: [
// 打包html
new HtmlWebpackPlugin({
template: './src/index.html', // 打包的模板
filename: 'index.html', // 输出的名字
}),
// 提取css
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
// 启动开发服务器
devServer: {
contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
publicPath: '/', // 服务器资源目录
compress: true, // 启动gzip压缩
port: 8088, // 端口
open: true, // 自动打开浏览器
openPage: 'index.html', // 指定当前要打开页面的名字
},
}
Webpack的本质是文件的自动化处理，包含了文件的压缩、合并、混淆、文件复制、监听文件操作（增、删、改），自动刷新浏览器等功能。
Webpack是前端的静态资源打包工具，代码解析分为两个阶段，编译和运行时阶段，webpack在编译阶段就可以帮助我们打包所有静态资源。
