Node.js与Webpack

Node.js

1 基本含义

1.1是什么

基于Chrome的V8引擎封装，独立执行js代码的环境

1.2 Node.js环境与浏览器环境的区别

Node.js环境中没有BOM和DOM

1.3 作用

• 编写后端：提供数据和网页资源
• 前端工程化：集成各种工具和技术

1.4 执行方式

终端输入node xxx.js 回车

2 fs模块—读写文件

2.1 作用

fs模块：封装了与本机文件系统交互的方法和属性

2.2 加载fs模块对象

const fs = require('fs') //fs是模块标识符

2.3 读文件

fs.readFile('文件路径'，(err,data) => {
	//err是错误
	//data是文件内容的Buffer数据流
})

data是16进制的Buffer数据流对象，具体内容要用data.toString()方法

2.4 写文件

fs.writeFile('文件路径'，'写入内容',err =>{
    //写入后的回调函数
})

3 path模块—路径处理

3.1 作用

• path.join( )根据不同系统拼接路径

__dirname内置变量（获取当前模块目录-绝对路径）

Node.js一般使用绝对路径，因为相对路径一般以当前终端路径作起点

3.2 加载path模块

const path = require('path')

3.3使用path.join方法

path.join('路径1','路径2',...)

举例

fs.readFile(path.join(__dirname,'../test.txt'),(err,data)=>{
    if (err) console.log(err)
    else console.log(data.toString())
})

4 URL端口号

4.1 作用

区分服务器不同的服务程序（Web服务程序，数据库服务程序…）

Web服务程序通过提供内容供浏览器浏览

5 http模块—创建Web服务

5.1 作用

创建服务并响应内容给浏览器

5.2 步骤

• 加载http模块，创建Web服务对象

  //1.加载http模块，创建Web服务对象
  const http = require('http')
  const server = http.createServer()
  
  //2.监听request请求事件，设置响应头req和响应体res
  server.on('request',(req, res) =>{
      //设置响应头：内容类型，普通文本：编码格式为UTF-8
      res.setHeader('Content-Type','text/plain;charset=utf-8')
      res.end('您好，欢迎使用node.js创建的Web服务')
  })
  
  //3.配置端口号并启动服务
  server.listen(3000,()=>{
      console.log('Web服务已经启动')
  })
  //4.浏览器请求http://localhost:3000测试
  
  

  测试后会启动一个进程监听是否有用户请求，可以CTRL+C终止进程

6 模块化开发

6.1 模块化含义

• 项目由很多模块文件组成
• 好处：提高代码复用性，按需加载，独立作用域
• 使用：按标准语法导出导入

6.2 CommonJS标准语法

使用步骤

• 导出 module.exports = { }

const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce(...)
module.exports = {
    对外属性名1：baseURL,
    对外属性名2：getArraySum
}

• 导入require('模块名或路径')

  内置模块：直接写名字（如：fs, path, http）

  自定义模块：模块文件路径（如：./utils.js）

6.3 ECMAScript标准 - 默认导出和导入

• 导出export default {}
• 导入：import 变量名 from '模块名或路径'

变量名就是导出的对象

Node.js默认支持CommonJS标准语法，如使用ECMA语法，在运行模块所在文件夹新建package.json文件，并设置{“type”:“module”}

6.4 ECMAScript标准 - 命名导出和导入

• 导出 export修饰定义语句

  export const baseURL = 'http://hmajax.itheima.net'

• 导入 import { 同名变量 } from ‘模块名或路径’

  import {baseURL,getArraySum} from '模块名或路径'

如何选择？

按需加载——命名导入导出

全部加载——默认导出和导入

7 包

7.1 包的概念

• 将模块，代码，其他资料整合成一个文件夹
• 分类
  • 项目包：主要用于写项目和业务逻辑
  • 软件包：封装工具和方法
    
    要求：根目录必须有package.json文件
    
    注意：导入软件包时，引入的默认是index.js模块文件/main属性指定的文件

7.3 npm — 软件包管理器

• 含义：下载管理Node.js包依赖的方式
• 使用步骤
  • 初始化清单文件 npm init -y（得到package.json文件，有则略过）
  • 下载软件包 npm i 软件包名称
  • 使用软件包
    

8.3 下载所有依赖包

• 使用场景：在项目包只有package.json，没有node_modules
• 下载命令：在对应的项目包终端使用npm i根据json文件下载对应依赖包

8.4 全局软件包和本地软件包

• 本地软件包：作用在当前项目，封装属性和方法
• 全局软件包：本机所有项目可使用，封装命令和工具
• nodemon作用：代替node命令，检测代码修改，自动重启程序
• nodemon使用方法
  • 安装命令 npm i nodemon -g
  • 在终端运行js文件 nodemon xxx.js

9 Node.js命令总结

功能	命令
执行js文件	node xxx.js
初始化package.json	npm init -y
下载本地软件包	npm i 软件包名
下载全局软件包	npm i 软件包名 -g
删除软件包	npm uni 软件包名

Webpack

1 含义

静态模块打包工具

• 静态模块：html,css,js,图片等固定内容文件

• 打包：将静态模块压缩，整合，转译（前端工程化）

  如：将ES6+降为ES5；支持多种模块标准语法

2 使用方法

• npm init -y新建并初始化项目（按下图路径），编写源代码

• npm i webpack webpack-cli --save-dev下载webpack webpack-cli到当前项目，并在json文件配置局部自定义命令

  "script":{
      "build"(自定义命令):webpack
  }
  

  ​

• npm run 自定义命令（json中包的别名）运行打包命令，自动产生dist分发文件

dist:打包后生成的默认文件夹

node_modules:软件包的源代码

src:默认的源代码文件夹

json文件：先在ABC终端环境初始化的json，然后在运行时记得配置局部自定义命令

—dist

	—main.js

—node_modules

—src

	—utils

		—软件文件代码

	—index.js(入口文件)

—package-lock.json

—package.json

3 修改Webpack打包的入口和出口

• 在项目根目录新建配置文件webpack.config.js
• 导出配置对象，配置入口，出口路径
• 重新打包观察

4 打包HTML文件

• 利用插件html-webpack-plugin:在webpack打包时生成html文件
• 步骤

  • 下载html-webpack-plugin软件包

  • 配置文件中写入配置项

    

    ​

5 打包CSS文件

加载器css-loader:解析css代码

加载器style-loader:将解析后的css代码插入到DOM

• 准备css代码，引入到编写的js文件中 import 'xxx'

• 下载本地软件包css-loader和style-loader npm i css-loader style-loader --save-dev

• 配置webpack.config.js

  //加载器：让webpack识别更多模块文件内容
  module.exports = {
      module:{
          rules:[
              {	//默认配置
                  test:/\.css$/i,
                  use:["style-loader","css-loader"]
              }
          ]
      }
  }
  

  ​

Webpack默认识别js代码

6 优化 — 提取css

• 使用插件mini-css-extract-plugin, 与style-loader加载器不能一起用（一个是将css单独提取，一个是将css插入到js中）

• 步骤

  • 下载本地软件包
  • 配置json文件
  

7 优化 — 压缩css

解决问题：css被提取后没有压缩

解决方法：利用插件css-minimizer-webpack-plugin

步骤：

• 下载本地软件包 npm i css-minimizer-webpack-plugin --save-dev

• 配置文件

  

  ​

8 打包less代码

加载器 less-loader：less代码编译成css代码

步骤：

• 新建less代码并引入到js文件
• 下载less和 less-loader 本地软件包
• 配置json文件

9 打包图片

资源模块：Webpack5内置资源（字体，图片等）打包，无需额外loader加载器

步骤：

• json文件引入图片资源

  若是本地图片资源要导入，如果是http://…开头的可以直接用字符串

  import imgObj from '图片资源地址'
  const theImg = document.createElement('img')
  theImg.src = imgObj
  document.querySelector('.login=wrap').appendChild(theImg)
  

  ​

• 配置json文件

占位符解释

[hash] ：对模块内容做算法计算，得到映射的数字字母组合的字符串

[ext] : 当前模块原本的占位符，如：“.png / .jpg 等”

[query] : 保留引入文件时代码中的查询参数（只有URL下生效）

注意：判断临界值是8kb

• 大于8kb：发送一个单独的文件并导出URL地址（如上图）
• 小于8kb：导出一个dataURL(base64字符串)

10 搭建开发环境

• 解决问题：启动web服务，自动检测代码变化，热更新到网页

  dist目录和打包内容是在内存里

• 步骤

  • 下载本地软件包webpack-dev-server

    npm i webpack-dev-server --save-dev

  • 设置模式为开发模式，并配置自定义命令

    // 设置模式为开发模式
    module.exports = {
        mode:'development'
    }
    

    // 自定义命令
    "scripts":{
        "build":"webpack",
        "dev":"webpack serve --open"
    }
    

  • 使用npm run dev(自定义命令)启动开发服务器

注意：

• webpack-dev-server用http模块创建8080端口的默认Web服务
• 默认以public文件夹作为服务器根目录
• webpack-dev-server根据配置，打包相关代码到内存（看不到打包），以配置文件中output.path的值作服务器根目录（所以可以自己拼接dist目录下的内容）

如果想直接访问指定页面，可以在public文件夹直接新建index.html文件，然后设置location.href = ‘跳转的文件地址’

11 打包模式

11.1含义

告知webpack使用相应模式的内置优化

11.2 分类

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载	本地开发
生产模式	production	压缩代码	打包上线

11.3 设置

• 在webpack.config.js配置文件设置mode 选项

  module.exports = {
      mode:'production'
  }
  

  ​

• 在package.json命令行设置mode参数

  "scripts":{
      "build":"webpack --mode=production",
      "dev":"webpack serve --mode=development"
  }
  

命令行配置优先级高于mode选项（会被覆盖），推荐第二种设置

11.4 应用

• 需求：在不同的模式下用不同的css提取方式

  开发模式下用style-loader内嵌更快

  生产模式用MiniCssExtractPlugin加载器

• 方式一：在配置文件中设置导出函数，但局限性大

• 方式二（推荐）：借助cross-env包命令，通过设置参数判断不同环境，再通过js判断语句根据不同参数选择相应的css提取方式，步骤如下：

  • 下载本地软件包cross-env

  • json配置自定义命令，传入参数和值（自动绑定process.env对象下）

    "scripts":{
        "build":"cross-env NODE_ENV=production webpack --mode=production",
        "dev":"cross-env NODE_ENV=development webpack serve --open --mode=development"
    }
    

  • 在配置文件根据不同的参数使用不同的配置

    module:{
        rules:[
            {
                ...
                use:[process.env.NODE_ENV = 'production'? MiniCssExtractPlugin.loader : 'style-loader',"css-loader"]
            }
        ]
    }
    

    ​

12 注入环境变量

12.1 需求

有时代码需要根据不同的环境变量编写不同的代码

但是由于实际运行环境是浏览器而不是node.js，因此编写代码时不能直接用process.env.NODE_ENV区分（只在node.js环境有效）

12.2 解决

使用Webpack内置的DefinePlugin插件

作用：在编译时，将前端对应的代码换成值/表达式

const webpack = require('webpack')
module.exports = {
    plugins:[
        new webpack.DefinePlugin({
            //key是注入到打包后的js代码中作为全局变量
            //value是在cross-env注入到node.js中的环境变量
            'process.env.NODE_ENV':JSON.stringfy(process.env.NODE_ENV)
        })
    ]
}

key是注入到打包后的js代码中作为全局变量

value是在cross-env注入到node.js中的环境变量

13 开发环境调错 - source map

13.1 需求

打包后的代码被压缩，无法定位源代码位置（行和列）

开发环境下需要确定出现错的代码位置，生产模式不需要

13.2 解决

source map ：可以准确追踪error和warning在原始代码的位置

source map仅适用于开发环境

设置：webpack.config.js配置devtool选项

module.exports = {
	//inline-source-map选项：把源码位置信息一起打包在js文件内
    devtool:'inline-source-map'
}

14 解析别名 - alias

14.1 需求

简化导入的路径

14.2 解决

配置文件中设置resolve.alias选项，变量@表示绝对路径

const config ={
    resolve:{
        alias:{
            '@':path.resolve(__dirname,'src')
        }
    }
}

配置后，导入则从1变成2

import axios from '../src/utils/request.js'

import axios from '@/utils/request.js'

15 CDN优化

15.1 需求

开发模式下用本地第三方库

生产模式下用cdn加载第三方资源

资源地址可以在boot-cdn网站查到

15.2 步骤

• html文件引入第三方库的CDN地址并用模板语法<% 代码 %>作环境变量判断

  <% if(htmlWebpack Plugin.options.useCDN){ %>
  	<link href="http://cdn.bootcdn.net/ajax/第三方库网址">
  <% } %>
  

  ​

• 根据软件包需要的第三方库找到import xx from

• 在配置文件中设置环境变量，并增加externals外部扩展选项（防止某些import的包被打包）

  //设置环境变量
  const config = {
      plugins:[
        new HtmlWebpackPlugin({
          useCDN:process.env.NODE_ENV === 'production'
        })
      ]
  }
  

  //增加环境变量选项
  if (process.env.NODE_ENV === 'production'){
      config.externals = {
          'axios':'axios'
      }
  }
  

  key:代码中import xxx from 后面的字符串

  value：替换的全局变量（要与cdn暴露的全局变量一致）

16 多页面打包

多页面：多个HTML文件，切换不同页面实现不同业务

步骤：

• 准备对应的源码（html, css, js），放入对应的路径位置

• 遵循模块化开发（设置导入导出）

  • 观察html文件需要哪些js和css文件？若引用的是cdn网址可以直接用（依情况决定），若是本地文件就不直接引用，而是通过后续导入到入口文件引用。
  • 设置用到的js文件之间的导入导出以及哪些用到了第三方库(如axios)，通过import语句导入
  • 将HTML文件用到的本地js和本地css文件都通过import语句导入到入口文件中（一般为对应业务文件夹的index.js)

• 在配置文件中，设置入口文件和HTML文件的输入输出路径

  建议导出路径和开发路径一致
  

[name]是webpack自动通过匹配对应模块名生成路径

HtmlWebpackPlugin里的路径不能直接用[name]，而是要设置chunks属性

其他对象的路径可以直接用[name]匹配模块名

17 优化-分割公共代码

17.1 需求

需求：把 2 个以上页面引用的公共代码提取

17.2 步骤

配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }}}
      }
    }

打包观察效果