Node.js开发指南：模块、npm与Webpack

En^_^Joy2026-03-25 11:56

文章目录

  • 一、Node.js介绍
    • [1.1 自定义模块导入](#1.1 自定义模块导入)
    • [1.2 Node内置模块导入（文件、路径、http）](#1.2 Node内置模块导入（文件、路径、http）)
  • 二、npm包的管理
  • 三、nodemon（自动重启）
  • 四、Webpack简介
    • [4.1 Webpack相关配置与打包](#4.1 Webpack相关配置与打包)
    • [4.2 设置变量（搭建开发环境）](#4.2 设置变量（搭建开发环境）)
    • [4.3 Webpack相关插件](#4.3 Webpack相关插件)

一、Node.js介绍

Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的 JavaScript 应用程序。

前端工程化：开发项目直到上线，过程中集成的所有工具和技术

可以在终端直接用Node执行js脚本：node xxx.js
Node官网（下载）：https://nodejs.cn/download

1.1 自定义模块导入

模块的定义导出与导入

javascript 复制代码 
// 自定义模块
const add = (a, b) => {
	return a + b
}

// 模块导出  供其他 js 文件使用
module.exports = {
	exportAdd: add
}
javascript 复制代码 
// 导入自定义模块
// 内置模块写名字（http/fs/path等）   自定义模块写路径
const obj = require('模块名或路径')   // obj就等于module.exports导出的对象

console.log(obj.exportAdd(1, 2))

ECMAScript标准 - 默认导出和导入

如需使用ECMAScript 标准语法，在运行模块所在文件夹新建package.json文件，并设置{"type":"module"}

javascript 复制代码 
// 自定义模块
const add = (a, b) => {
	return a + b
}

// 模块导出  供其他 js 文件使用
export default {
	exportAdd: add
}
javascript 复制代码 
// 导入自定义模块
// 内置模块写名字（http/fs/path等）   自定义模块写路径
import obj from '模块名或路径'     // obj就等于module.exports导出的对象

console.log(obj.exportAdd(1, 2))

ECMAScript标准 - 命名导出和导入

如需使用ECMAScript 标准语法，在运行模块所在文件夹新建package.json文件，并设置{"type":"module"}

javascript 复制代码 
// 自定义模块  并导出
export const add = (a, b) => {
	return a + b
}
javascript 复制代码 
// 模块导入   内置模块写名字（http/fs/path等）   自定义模块写路径
import { add } from '模块名或路径'
// obj就等于module.exports导出的对象

console.log(add(1, 2))

1.2 Node内置模块导入（文件、路径、http）

fs模块 - 读写文件

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

javascript 复制代码 
const fs = require('fs')  // fs 是模块标识符：模块的名字

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


fs.writeFile('文件路径', (err, data) => {
	// 读取后的回调函数   data 是文件内容的 Buffer 数据流 (16进制)
	console.log(data.toString())
}

path模块 - 路径处理

_dirname内置变量(获取当前模块目录-绝对路径)
path.join()会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起

javascript 复制代码 
const path = require('path')

console.log(__dirname)   // 获取当前模块目录
path.join(__dirname, 'test.txt')

http模块 - 创建web服务

javascript 复制代码 
const http = require('http')
const server = http.createServer()

server.on('request', (req, res) => {
    // 设置响应头:内容类型，普通文本;编码格式为 utf-8
    res.setHeader('Content-Type', 'text/plain;charset=utf-8')
    // 设置响应体内容，结束本次请求与响应
    res.end('您好，欢迎使用 node.js创建的 web 服务')
})

// 3000端口号
server.listen(3000, () => {
    console.log('Web 服务已经启动')
})

执行指令：node xxx.js

访问：http://localhost:3000

二、npm包的管理

npm（Node Package Manager）是JavaScript运行时Node.js的默认包管理工具。它用于共享、分发和管理代码模块（称为"包"），这些模块可以是开源库、工具或框架。npm包通常包含一个package.json文件，用于描述包的元信息（如名称、版本、依赖项等）

npm相关指令

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

npm使用指南

  1. 初始化清单文件: npm init -y
    执行会自动生成 package.json 配置文件
    package.json配置：在项目的根目录中，必须有 package.json 配置文件，定义包的名称、版本、作者、依赖项、脚本命令等
json 复制代码 
{
	"name": "xx",  // 软件包名称
	"version": "1.0.0",  // 软件包当前版本
	"description": "xxx",  // 软件包简短描述
	"main":"index.js",  // 软件包入口点
	"author":"xxx"  // 软件包作者
	"license": "MIT"  // 软件包许可证
}
  1. 下载软件包： npm i 软件包名称
    执行后会在项目的根目录创建 node_modules 文件夹，里面存放包的源码信息，同时会把报包的版本信息自动更新到 package.json 中， 自动生成 package-lock.json 文件（固化软件包版本）
  2. 使用软件包
    const dayis = require('dayjs')

npm - 安装所有依赖

拿到某项目后，当前是不含依赖包的，如果要运行，需要 使用指令 npm i 安装项目对应的软件包，该指令会根据项目中的 package.json 下载项目所有依赖包

三、nodemon（自动重启）

nodemon 是一个用于 Node.js 开发的工具，主要功能是监控文件变化并自动重启应用程序。它特别适用于开发阶段，能够显著提升调试效率，避免手动重启服务的繁琐操作。

自动重启 ：当项目中的文件（如 .js、.json 等）被修改并保存时，nodemon 会自动重启 Node.js 应用。
灵活配置 ：支持通过命令行参数或配置文件（如 nodemon.json）自定义监控规则、忽略文件、延迟时间等。
跨平台支持：兼容 Windows、macOS 和 Linux 系统。
全局安装：npm install -g nodemon（-g 代表安装到全局环境中）

项目开发依赖安装：npm install --save-dev nodemon

运行：nodemon xxx.js

配置文件：在项目根目录创建 nodemon.json

javascript 复制代码 
{
  "watch": ["src/"],
  "ignore": ["tmp/"],
  "ext": "js,json",
  "delay": "2000"
}

与 npm scripts 集成：在 package.json 中添加脚本，然后运行脚本 npm run dev 启动

javascript 复制代码 
"scripts": {
  "dev": "nodemon app.js"
}

注：nodemon 仅用于开发环境，生产环境应直接使用 node 命令。若应用崩溃，nodemon 会尝试自动重启，但可能因错误配置导致循环重启

四、Webpack简介

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它通过分析项目中的依赖关系，将多个模块（如 JavaScript、CSS、图片等）打包成一个或多个优化后的静态资源文件。Webpack 的核心目标是实现前端资源的模块化管理和高效打包，在根目录下创建 webpack.config.js 文件进行 Webpack 相关配置
Webpack使用与插件相关链接：https://webpack.docschina.org/concepts/#entry

4.1 Webpack相关配置与打包

核心概念

可以通过配置文件，来指定入口、输出、打包方式等等
入口 ：指定打包的起点文件，Webpack 从该文件开始构建依赖图
输出 ：定义打包后文件的输出目录和文件名，通常配置为 dist 文件夹
加载器 ：用于处理非 JavaScript 文件（如 CSS、图片），将其转换为 Webpack 可识别的模块（如：css-loader、file-loader等）
插件 ：扩展 Webpack 功能（如：HtmlWebpackPlugin、CleanWebpackPlugin等）
模式：区分开发（development）和生产（production）环境，自动启用优化策略

Webpack打包

在项目根目录执行指令：npm i webpack webpack-cli --save-dev
在 package.json 的 scripts 部分添加build

javascript 复制代码 
{
	"scripts": {
		"build": "webpack"  // 添加的内容
	}
}

运行指令打包：npm run build （会生成一个文件夹，所有内容压缩为一个main.js）

配置 webpack打包入口和出口

根目录下新建编辑 webpack.config.js 文件指定入口文件和输出信息，内容如下

javascript 复制代码 
module.exports = {
	entry: 'xxx/xxx.js',  // 指定入口文件  未配置默认 ./src/index.ts 
	output: {     // 输出信息
		path: 'xxx/dist',
		filename: 'xxx.bundle.js',  // 输出打包后的文件名
		clean: true   // 打包时清空上次的内容
	}
}

配置解析解析别名 alias

在webpack.config.js中配置解析别名@来代表src绝对路径

javascript 复制代码 
module.exports = {
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src')
		}
	}
}
javascript 复制代码 
// 配置 别名 之前调用
import { xxx } from "./xxx/xxx"
// 添加后可用 @ 符合
import { xxx } from "@/xxx/xxx"

多页面打包

下载form-serialize包并导入到核心代码中使用

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

javascript 复制代码 
module.exports = {
	entry: {  // 入口
		'模块1': 'xxx/xxx.js',
		'模块2': 'xxx/xxx.js'
	},
	output: {  
		path: 'xxx/dist',
		filename: './[name]/index.js'
	},
	plugins: [
		new HtmlWebpackPlugin({   // 打包 html 文件
			template: './public/xxx1.html',
			filename: './xxx/index.html',
			chunks: ['模块']
		}),
		new HtmlWebpackPlugin({
			template: './public/xxx2.html',
			filename: './xxx/index.html',
			chunks: ['模块']
		})
	]
}

4.2 设置变量（搭建开发环境）

webpack-dev-server 提供了一个能够实时重新加载的基本的 web server（代码更新后自动更新）

安装插件：npm i webpack-dev-server --save-dev

相关文档：https://webpack.docschina.org/guides/development/#using-webpack-dev-server
修改 package.json 文件，添加 dev 项，并使用node声明环境，最后使用指令启动服务：npm run dev，默认以 public 文件夹作为服务器根目录

javascript 复制代码 
"scripts": {
	"build": "webpack --mode=production",  // production 生产环境 （或写到 webpack.config.js 的 mode中 ）
	"dev": "webpack serve --open --mode=development"  // development 开发环境 （或写到 webpack.config.js 的 mode中 ）
}

环境变量

可以在指令中设置环境变量，然后通过变量来判断使用什么配置

安装插件：npm i cross-env --save-dev
修改 package.json 文件，设置变量NODE_ENV

javascript 复制代码 
"scripts": {
	"build": "cross-env NODE_ENV=production webpack",   // cross-env 设置环境变量
	"dev": "cross-env NODE_ENV=development webpack serve --open" 
}
javascript 复制代码 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        // 上面设置的环境变量
        use: [process.env.NODE_ENV === 'development' ? 'style-loader':  MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

也可以直接在 文件中进行环境变量配置

文档：https://webpack.docschina.org/plugins/define-plugin

javascript 复制代码 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	new webpack.DefinePlugin({
		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
	});
};

4.3 Webpack相关插件

打包html文件

插件文档：https://webpack.docschina.org/plugins/html-webpack-plugin

  1. 安装插件：npm install --save-dev html-webpack-plugin
  2. 配置 webpack.config.js 让 Webpack 拥有插件功能
  3. 运行指令打包：npm run build
javascript 复制代码 
const HtmlWebpackPlugin = require('html-webpack-plugin')

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

打包CSS文件（css 整合到 js 中）

插件文档：https://webpack.docschina.org/loaders/css-loader

插件文档：https://webpack.docschina.org/loaders/style-loader

  1. 安装插件：npm i css-loader style-loader --save-dev
  2. 配置 webpack.config.js 让 Webpack 拥有插件功能
  3. 运行指令打包：npm run build
javascript 复制代码 
const HtmlWebpackPlugin = require('html-webpack-plugin')

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

优化 - 提取 CSS 代码（css 独立为一个文件）

插件文档：https://webpack.docschina.org/plugins/mini-css-extract-plugin

  1. 安装插件：npm i mini-css-extract-plugin --save-dev
  2. 配置 webpack.config.js 让 Webpack 拥有插件功能
  3. 运行指令打包：npm run build
javascript 复制代码 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

优化 - 压缩过程

插件文档：https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin

  1. 安装插件：npm i css-minimizer-webpack-plugin --save-dev
  2. 配置 webpack.config.js 让 Webpack 拥有插件功能
  3. 运行指令打包：npm run build
javascript 复制代码 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

更多配置参考：https://webpack.docschina.org/plugins

相关推荐
悟空瞎说3 小时前
生产环境Node.js内存泄漏，定位+根治全流程（图文版）
javascript·node.js
程序猿的程5 小时前
把股票数据能力接进 AI：stock-sdk-mcp 的实践整理
前端·javascript·node.js
kyle~6 小时前
Node.js 服务端运行时环境
node.js
前端炒粉7 小时前
Webpack 基础核心内容总结
前端·webpack·node.js
二十_M7 小时前
构建工具 - Webpack 的工程实现分析
webpack
Qinana7 小时前
面试官想听什么？WebSocket协议升级、Koa实战与心跳机制全解析
后端·websocket·node.js
没有蛀牙lm7 小时前
windows下快速安装android studio（预估30min）
开发语言·javascript·webpack
一只大马猴呀9 小时前
Windows 安装使用 nvm，Node.js、npm多版本管理、切换
前端·npm·node.js
子兮曰18 小时前
Bun v1.3.11 官方更新全整理：新增功能、关键修复与升级验证
javascript·node.js·bun
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06班级宠物园部署指南07UV安装并设置国内源08【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）09OpenClaw 使用和管理 MCP 完全指南10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）