很楠不爱3

这个屌丝很懒，什么也没留下！

热门标签

Node.js入门与 Webpack模块打包工具_nodejs 打包

作者：很楠不爱3 | 2024-03-27 14:50:08

踩

nodejs 打包

体验 Web 服务除了接口数据以外，还能返回网页资源等

案例-用户登录-长度判断 Webpack 自动生成 html 文件

Webpack 开发环境调错 source map

Node.js入门

官方下载地址：https://nodejs.org/zh-cn/

配置环境变量

Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码

Node.js 有什么用？

编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，提高开发效率

Node.js 为何能执行 JS 代码？

基于 Chrome 的 V8 引擎封装

Node.js 与浏览器环境的 JS 最大区别？

Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法

Node.js 如何执行代码？

在 VSCode 终端中输入：node xxx.js 回车即可执行（注意路径）

fs模块-读写文件

模块：类似插件，封装了方法和属性供我们使用
fs 模块：封装了与本机文件系统进行交互的，方法和属性

fs 模块使用语法如下：

加载 fs 模块，得到 fs 对象
```
const fs = require('fs')
```

写入文件内容语法：


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

读取文件内容的语法：


fs.readFile('文件路径', (err, data) => {
  // 读取后的回调函数
  // data 是文件内容的 Buffer 数据流
})

path模块-路径处理

path.join() 方法有什么用？

按照所在本机系统的分隔符作为定界符来链接你传入的路径

__dirname 模块内置变量的值是

动态获取当前文件所在文件夹的绝对路径

压缩前端html

前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了提高前端开发项目的效率

认识URL中的端口号

URL 是统一资源定位符，简称网址，用于访问网络上的资源
端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）
注意：http 协议，默认访问的是 80 端口
Web服务：一个程序，用于提供网上信息浏览功能
注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用

http模块-创建Web服务

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

步骤：
1. 引入 http 模块，创建 Web 服务对象
2. 监听 request 请求事件，对本次请求，做一些响应处理
3. 启动 Web 服务监听对应端口号
4. 运行本服务在终端进程中，用浏览器发起请求


// 1.1 加载 http 模块，创建 Web 服务对象
const http = require('http')
const server = http.createServer()
// 1.2 监听 request 请求事件，设置响应头和响应体
server.on('request', (req, res) => {
  // 设置响应头-内容类型-普通文本以及中文编码格式
  res.setHeader('Content-Type', 'text/plain;charset=utf-8')
  // 设置响应体内容，结束本次请求与响应
  res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})
// 1.3 配置端口号并启动 Web 服务
server.listen(3000, () => {
  console.log('Web 服务启动成功了')
})

体验 Web 服务除了接口数据以外，还能返回网页资源等

步骤：
1. 基于 http 模块，创建 Web 服务
2. 使用 req.url 获取请求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给请求方
3. 其他路径，暂时返回不存在的提示
4. 运行 Web 服务，用浏览器发起请求


const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  if (req.url === '/index.html') {
    fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end(data.toString())
    })
  } else {
    // 3. 其他路径，暂时返回不存在提示
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('你要访问的资源路径不存在')
  }
})
server.listen(8080, () => {
  console.log('Web 服务启动了')
})

Node.js模块化

Node.js 中什么是模块化?

每个文件都是独立的模块

模块之间

使用特定语法，导出和导入使用

CommonJS 标准规定如何导出和导入模块?

导出：module.exports = {},导入：require('模块名或路径')

模块名/路径如何选择?

内置模块：写名字。例如：fs，path，http等。自定义模块：写模块文件路径，例如：./utils.js

ECMAScript标准-默认导出和导入

导出语法：


export default {
  对外属性名: 模块内私有变量
}

导入语法：

import 变量名 from '模块名或路径'

注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置
```
{ “type”: "module" }
```

ECMAScript标准-命名导出和导入

命名导出语法：
```
export 修饰定义语句
```

命名导入语法：

import { 同名变量 } from '模块名或路径'

与默认导出如何选择：
- 按需加载，使用命名导出和导入
- 全部加载，使用默认导出和导入

包的概念

包：将模块，代码，其他资料整合成一个文件夹，这个文件夹就叫包
包分类：
- 项目包：主要用于编写项目和业务逻辑
- 软件包：封装工具和方法进行使用
包要求：根目录中，必须有 package.json 文件（记录包的清单信息）
包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象

npm软件包管理器

npm 简介链接：软件包管理器，用于下载和管理 Node.js 环境中的软件包

npm 使用步骤：

初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）

注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线
下载软件包：npm i 软件包名称
使用软件包

npm安装所有依赖

如何得到需要的所有依赖软件包呢？

直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

npm全局软件包-nodemon

软件包区别：
- 本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
- 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
nodemon 作用：替代 node 命令，检测代码更改，自动重启程序
nodemon 使用：
1. 安装：npm i nodemon -g （-g 代表安装到全局环境中）
2. 运行：nodemon 待执行的目标 js 文件

Node.js概念和常用命令总结

Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用

CommonJS 标准：一般应用在 Node.js 项目环境中

ECMAScript 标准：一般应用在前端工程化项目中
Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包
项目包：编写项目需求和业务逻辑的文件夹

软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）
- 本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求
- 全局软件包：作用在所有项目，一般封装的命令/工具，支撑项目运行
Node.js 常用命令：

Webpack模块打包工具

webpack | webpack 中文文档 | webpack 中文网 (webpackjs.com)

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）
- 把 less/sass 转成 css 代码
- 把 ES6+ 降级成 ES5 等
- 支持多种模块文件类型，多种模块标准语法

步骤：

新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件
```
npm init -y
```
新建 src 源代码文件夹（书写代码）
下载 webpack webpack-cli 到项目（版本独立）
```
npm i webpack webpack-cli --save-dev
```
注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用
项目中运行工具命令，采用自定义命令的方式（局部命令）
```
npm run build
```
npm run 自定义命令名字

注意：实际上在终端运行的是 build 右侧的具体命名
自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

Webpack 修改入口和出口

Webpack 配置：影响 Webpack 打包过程

步骤：

项目根目录，新建 Webpack.config.js 配置文件

导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）


const path = require('path')
 
module.exports = {
//入口
  entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
    clean: true // 生成打包后内容之前，清空输出目录
  }
}

重新打包

案例-用户登录-长度判断 Webpack 自动生成 html 文件

步骤：

新建 public/login.html 准备网页模板
核心 JS 代码写在 src/login/index.js 文件

Webpack 自动生成 html 文件步骤：

下载 html-webpack-plugin 本地软件包到项目中
```
npm i html-webpack-plugin --save-dev
```

配置 webpack.config.js 让 Webpack 拥有插件功能


// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  // ...
// 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板文件
      filename: './login/index.html' // 输出文件
    })
  ]
}

指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

运行自定义命令，让 Webpack 打包 JS 代码

Webpack-打包 css 代码

介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

加载器 css-loader：解析 css 代码
加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

准备 css 文件引入到 src/login/index.js


import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

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

配置 webpack.config.js 让 Webpack 拥有该加载器功能


// ...
 
module.exports = {
  // ...
// 加载器
  module: { 
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
};

打包后运行

优化-提取 css 代码

需要：mini-css-extract-plugin 插件来实现
注意：不能和 style-loader 一起使用

步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中
```
npm i --save-dev mini-css-extract-plugin
```

配置 webpack.config.js 让 Webpack 拥有该插件功能


// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        //不能和 style-loader 一起使用 
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: './[name]/index.css' //输出的地址
    })
  ]
};

打包

优化css压缩过程

把单独提取的 css 文件内代码压缩

需要：css-minimizer-webpack-plugin 插件来实现

步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中
```
npm i css-minimizer-webpack-plugin --save-dev 
```

配置 webpack.config.js 让 Webpack 拥有该插件功能


// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

打包

Webpack-打包 less 代码

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

步骤：

新建 login/index.less 文件，设置背景图样式
less 样式引入到 src/login/index.js 中
下载 less 和 less-loader 本地软件包
```
npm i less less-loader --save-dev
```

配置 webpack.config.js 让 Webpack 拥有功能


// ...
 
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
}

打包

Webpack-打包图片

资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

步骤：

配置 webpack.config.js 让 Webpack 拥有打包图片功能

占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

占位符【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

占位符【query】保留引入文件时代码中查询参数（只有 URL 下生效）
注意：判断临界值默认为 8KB

大于 8KB 文件：发送一个单独的文件并导出 URL 地址

小于 8KB 文件：导出一个 data URI（base64字符串）
在 src/login/index.js 中给 img 标签添加 logo 图片

配置 webpack.config.js 让 Webpack 拥有打包图片功能


// ...
 
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

打包

案例-用户登录-引入axios 包

步骤：

使用 npm 下载 axios
```
npm i axios
```
准备并修改 utils 工具包源代码导出实现函数 import axios from 'axios' 导出：export default axios
引入到 src/login/index.js 中编写业务实现导入
```
import myAxios from '../utils/request.js'
```
打包

Webpack 搭建开发环境

步骤；

下载 webpack-dev-server 软件包到当前项目
```
npm i webpack-dev-server --save-dev
```

配置自定义命令，并设置打包的模式为开发模式


// ...
 
module.exports = {
  // ...
  mode: 'development'
}


"scripts": {
  // ...
  "dev": "webpack serve --mode=development"
},

package.josn 下加


"scripts": {
   // 自动打开浏览器
    
    "dev": " webpack serve --open"
  },

使用 npm run dev 来启动开发服务器
// 注意1：webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务

// 注意2：默认以 public 文件夹作为服务器根目录

// 注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）

Webpack 打包模式

如何设置影响 Webpack呢？

方式1：在 webpack.config.js 配置文件设置 mode 选项


// ...
 
module.exports = {
  // ...
  mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数


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

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置
体验：在 build 命令后修改 mode 的值，打包输出观察打包后的 js 文件内容

Webpack 打包模式的应用

步骤：

1.下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2.配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3.在 webpack.config.js 区分不同环境使用不同配置


module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      }
    ],
  },

Webpack 前端注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

配置 webpack.config.js 中给前端注入环境变量


// ...
const webpack = require('webpack')
 
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

index.js中


if (process.env.NODE_ENV === 'production') {
  console.log = function() {}
}
console.log('开发模式下显示，生产模式下失效')

Webpack 开发环境调错 source map

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

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


// ...
 
module.exports = {
  // ...
  devtool: 'inline-source-map'
}
 
 
 
 
// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

Webpack 设置解析别名路径

配置解析别名：在 webpack.config.js 中设置


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

引入目标模块写的路径就更简单了

import { checkPhone, checkCode } from '@/utils/check.js'

优化-CDN使用

步骤：

1.在 html 中引入第三方库的 CDN 地址并用模板语法判断


<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）


// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios'
  }
}


// ...
const config = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
      useCdn: process.env.NODE_ENV === 'production'
    })
  ]
}

Webpack 多页面打包

步骤：

准备源码（html，css，js）放入相应位置，并改用模块化语法导出
下载 form-serialize 包并导入到核心代码中使用

配置 webpack.config.js 多入口和多页面的设置


// ...
const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

重新打包

优化-分割公共代码

步骤：

1.配置 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 目录下位置
          }
        }
      }
    }

2.打包

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/324896