1. Node.js入門基礎(chǔ)

1.1 什么是 Node.js？

Node.js 是一個基于 Chrome V8 引擎的獨立 JavaScript 運行環(huán)境。它使得 JavaScript 可以脫離瀏覽器運行，主要用于：

• 編寫服務(wù)器端程序：構(gòu)建后端API、Web服務(wù)。
• 前端工程化：對前端代碼進(jìn)行壓縮、轉(zhuǎn)譯、整合等，提高開發(fā)效率。

與瀏覽器環(huán)境的區(qū)別：Node.js 環(huán)境中沒有瀏覽器提供的 document 和 window 等 BOM/DOM 對象，但完全支持 ECMAScript 標(biāo)準(zhǔn)語法。

如何執(zhí)行代碼：

1. 在終端中切換到腳本所在目錄。
2. 執(zhí)行命令：node 你的文件名.js

示例 (hello.js)：

console.log('Hello, Node.js!');
for (let i = 0; i < 3; i++) {
  console.log(i);
}

在終端執(zhí)行：node hello.js

1.2 fs 模塊 - 讀寫文件

fs 是 Node.js 內(nèi)置的模塊，用于與文件系統(tǒng)交互。

• 導(dǎo)入模塊：const fs = require('fs')
• 寫入文件：fs.writeFile(文件路徑, 寫入內(nèi)容, 回調(diào)函數(shù))
• 讀取文件：fs.readFile(文件路徑, 回調(diào)函數(shù))。讀取到的 data 是一個 Buffer 數(shù)據(jù)流，需要用 .toString() 方法轉(zhuǎn)換。

const fs = require('fs');
// 寫入文件
fs.writeFile('./test.txt', 'Hello FS', (err) => {
  if (err) console.log(err);
  else console.log('寫入成功');
});
// 讀取文件
fs.readFile('./test.txt', (err, data) => {
  if (err) console.log(err);
  else console.log(data.toString()); // 輸出: Hello FS
});

1.3 path 模塊 - 處理路徑

在 Node.js 執(zhí)行代碼時，相對路徑的參照點是終端所在的工作目錄，而不是代碼文件所在目錄。這可能導(dǎo)致在不同位置運行腳本時路徑解析錯誤。建議始終使用絕對路徑。

使用 __dirname （當(dāng)前文件所在文件夾的絕對路徑）配合 path.join() 方法來構(gòu)建安全的絕對路徑。

const fs = require('fs');
const path = require('path');
// ? 危險：相對路徑依賴終端位置
// fs.readFile('../data.txt', ...)
// ? 安全：使用絕對路徑
const filePath = path.join(__dirname, '..', 'data.txt');
console.log(filePath); // 輸出類似: /Users/xxx/project/data.txt
fs.readFile(filePath, (err, data) => {
  // ...
});

path.join() 的作用：根據(jù)所在操作系統(tǒng)的規(guī)則，正確地將多個路徑片段拼接成一個完整的路徑。

1.4 簡易前端工程化實踐：壓縮 HTML

前端工程化 是使用工具對前端代碼進(jìn)行壓縮、轉(zhuǎn)譯、整合、自動化部署等一系列操作，以提高開發(fā)效率和質(zhì)量。

需求：將 HTML 文件中的回車符 (\r) 和換行符 (\n) 移除，實現(xiàn)代碼壓縮。

const fs = require('fs');
const path = require('path');
fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
  const htmlStr = data.toString();
  // 使用正則表達(dá)式全局替換所有回車和換行符
  const resultStr = htmlStr.replace(/[\r\n]/g, '');
  fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => {
    if (err) console.log(err);
    else console.log('HTML壓縮成功！');
  });
});

1.5 Web 服務(wù)基礎(chǔ)

• URL 端口號：用于標(biāo)記服務(wù)器中不同的服務(wù)程序，范圍 0-65535。HTTP 服務(wù)默認(rèn)端口是 80。
• Web 服務(wù)：一個提供網(wǎng)上信息瀏覽功能的程序。

使用 http 模塊創(chuàng)建 Web 服務(wù)

const http = require('http');
const server = http.createServer();
server.on('request', (req, res) => {
  // 設(shè)置響應(yīng)頭
  res.setHeader('Content-Type', 'text/plain;charset=utf-8');
  // 設(shè)置響應(yīng)體，結(jié)束本次請求
  res.end('歡迎使用 Node.js 創(chuàng)建的 Web 服務(wù)');
});
server.listen(3000, () => {
  console.log('Web 服務(wù)已在 http://localhost:3000 啟動');
});

訪問：http://localhost:3000

返回網(wǎng)頁資源

可以根據(jù)請求路徑，返回不同的內(nèi)容（如 HTML 文件）。

server.on('request', (req, res) => {
  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 {
    res.setHeader('Content-Type', 'text/html;charset=utf-8');
    res.end('404 頁面不存在');
  }
});

2. 模塊化開發(fā)

2.1 模塊化簡介

在 Node.js 中，每個 .js 文件都被視為一個獨立的模塊。模塊內(nèi)部定義的變量、函數(shù)擁有獨立作用域，不會污染全局。
模塊化的好處：代碼復(fù)用、按需加載、獨立作用域、便于協(xié)作。

2.2 CommonJS 標(biāo)準(zhǔn)（Node.js 默認(rèn)）

• 導(dǎo)出模塊：module.exports = { ... }
• 導(dǎo)入模塊：const 變量 = require('模塊標(biāo)識')
  • 內(nèi)置模塊：直接寫名字，如 require('fs')
  • 自定義模塊：寫文件路徑，如 require('./utils.js')

示例 (utils.js):

const baseUrl = 'http://api.example.com';
const sumArray = arr => arr.reduce((s, v) => s + v, 0);
module.exports = {
  url: baseUrl,
  sum: sumArray
};

示例 (index.js):

const utils = require('./utils.js');
console.log(utils.url); // 'http://api.example.com'
console.log(utils.sum([1,2,3])); // 6

2.3 ECMAScript 標(biāo)準(zhǔn) (ES Modules)

在項目中新建 package.json 并設(shè)置 { "type": "module" } 后，即可使用 ES6 模塊語法。

默認(rèn)導(dǎo)出與導(dǎo)入

// utils.js (導(dǎo)出)
const baseUrl = 'http://api.example.com';
export default { url: baseUrl };
// index.js (導(dǎo)入)
import utils from './utils.js';
console.log(utils.url);

命名導(dǎo)出與導(dǎo)入 (按需加載)

// utils.js (導(dǎo)出)
export const baseUrl = 'http://api.example.com';
export const sumArray = arr => arr.reduce((s, v) => s + v, 0);
// index.js (導(dǎo)入)
import { baseUrl, sumArray } from './utils.js';
console.log(baseUrl, sumArray([1,2,3]));

如何選擇：全部加載用默認(rèn)導(dǎo)出，按需加載用命名導(dǎo)出。

3. npm 與包管理

3.1 包 (Package) 的概念

將模塊、代碼、資源等聚合成的一個文件夾，稱為“包”。

• 項目包：編寫業(yè)務(wù)邏輯的代碼。
• 軟件包：封裝了工具和方法供開發(fā)者使用。
• 核心：包的根目錄必須有 package.json 文件，記錄包的名稱、版本、入口文件等信息。
• 導(dǎo)入：require('包名/路徑') 時，默認(rèn)導(dǎo)入的是包內(nèi) package.json 中 main 字段指定的文件，或 index.js 文件。

3.2 npm (Node Package Manager)

npm 是 Node.js 環(huán)境的軟件包管理器，用于下載和管理項目依賴。

基礎(chǔ)命令：

1. 初始化項目清單：npm init -y (快速生成 package.json)
2. 安裝本地軟件包：npm i 包名 (安裝到當(dāng)前項目的 node_modules 下，并記錄在 package.json 的 dependencies 中)
   • 示例：npm i axios
3. 安裝全局軟件包：npm i 包名 -g (安裝到系統(tǒng)全局，通常用于工具命令)
   • 示例：npm i nodemon -g
4. 根據(jù) package.json 安裝所有依賴：npm i (在拿到新項目且無 node_modules 文件夾時使用)
5. 清屏 (終端內(nèi))：cls (Windows) 或 clear (Mac/Linux) 或 Ctrl + L

全局包示例：nodemon

• 作用：替代 node 命令，監(jiān)聽代碼變化并自動重啟應(yīng)用，提高開發(fā)效率。
• 使用：安裝后，用 nodemon app.js 替代 node app.js 啟動應(yīng)用。

4. Webpack 模塊打包工具

4.1 Webpack 簡介

Webpack 是一個靜態(tài)模塊打包工具。它會從一個或多個入口點出發(fā)，構(gòu)建一個依賴關(guān)系圖，將所有模塊（JS、CSS、圖片、字體等）打包成一個或多個用于生產(chǎn)環(huán)境使用的靜態(tài)資源包。

核心作用：實現(xiàn)前端工程化，例如將 Less/Sass 轉(zhuǎn)成 CSS、將 ES6+ 語法降級、壓縮代碼、整合資源等。

基礎(chǔ)使用：

1. 初始化項目并安裝 Webpack：

   npm init -y
   npm i webpack webpack-cli --save-dev

2. 在 package.json 的 scripts 中配置自定義命令：

   "scripts": {
     "build": "webpack"
   }

3. 運行 npm run build 進(jìn)行打包。默認(rèn)入口是 src/index.js，默認(rèn)輸出到 dist/main.js。

4.2 核心配置 (webpack.config.js)

Webpack 的行為通過配置文件進(jìn)行修改。以下是關(guān)鍵配置項：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 1. 打包模式：'development' | 'production'
  mode: 'development',
  // 2. 入口 (可配置多入口)
  entry: path.resolve(__dirname, 'src/login/index.js'),
  // 3. 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'
  },
  // 4. 插件 (擴(kuò)展功能)
  plugins: [
    // 自動生成HTML文件并引入打包后的JS
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板
      filename: './login/index.html'    // 輸出位置
    })
  ],
  // 5. 加載器 (讓W(xué)ebpack能處理非JS資源)
  module: {
    rules: [
      // 處理 CSS
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'] // 從右向左執(zhí)行
      },
      // 處理 Less
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 處理圖片資源
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext]' // 輸出文件名格式
        }
      }
    ]
  },
  // 6. 解析配置
  resolve: {
    alias: { // 路徑別名
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 7. 開發(fā)服務(wù)器
  devServer: {
    port: 8080,
    open: true, // 自動打開瀏覽器
    hot: true   // 熱模塊替換
  }
};

常用插件和加載器安裝：

npm i html-webpack-plugin css-loader style-loader less less-loader mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

常用加載器說明：

• css-loader：解析 @import 和 url() 語法。
• style-loader：將解析后的 CSS 通過 <style> 標(biāo)簽插入到 DOM。
• less-loader：將 Less 編譯為 CSS。

4.3 常用優(yōu)化

• 提取 CSS 為獨立文件：使用 mini-css-extract-plugin 插件替代 style-loader，方便瀏覽器緩存。
• 壓縮 CSS：使用 css-minimizer-webpack-plugin 插件。
• 設(shè)置路徑別名：在 resolve.alias 中配置，簡化導(dǎo)入路徑（如用 @ 代表 src 目錄）。
• 開發(fā)環(huán)境調(diào)錯 (Source Map)：配置 devtool: 'inline-source-map'，可在瀏覽器中精確定位源代碼錯誤位置。
• 生產(chǎn)環(huán)境使用 CDN：通過配置 externals 排除某些庫不打入包，并在 HTML 模板中通過條件判斷引入 CDN 鏈接，以減小打包體積。
• 分割公共代碼：在 optimization.splitChunks 中配置，將多個頁面/入口共用的模塊提取成單獨文件。

4.4 打包模式與環(huán)境變量

• 模式 (Mode)：
  • development：啟用調(diào)試、熱更新等功能。
  • production：自動壓縮代碼、優(yōu)化資源。
  • 可通過命令行 --mode=production 設(shè)置，優(yōu)先級高于配置文件。
• 區(qū)分環(huán)境：
  1. 安裝 cross-env：npm i cross-env --save-dev
  2. 修改 package.json 命令，注入環(huán)境變量：

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

  3. 在 webpack.config.js 中通過 process.env.NODE_ENV 判斷環(huán)境。
  4. 通過 DefinePlugin 將環(huán)境變量注入到前端代碼中。
• 多頁面打包：配置多個 entry 和對應(yīng)的 HtmlWebpackPlugin 實例即可。

5. 常用開發(fā)環(huán)境配置與優(yōu)化

1. 開發(fā)服務(wù)器：使用 webpack-dev-server 提供實時重新加載和熱模塊替換功能。
2. 環(huán)境變量注入：使用 DefinePlugin 將 Node.js 環(huán)境中的變量注入到前端代碼中。
3. 路徑解析：通過 resolve.alias 配置別名，簡化導(dǎo)入語句。
4. 生產(chǎn)優(yōu)化：結(jié)合 CDN、代碼分割、公共代碼提取等手段優(yōu)化產(chǎn)物體積和加載性能。

通過以上學(xué)習(xí)，你可以掌握從 Node.js 基礎(chǔ)、模塊化開發(fā)、npm 包管理，到使用 Webpack 進(jìn)行現(xiàn)代化前端項目構(gòu)建和優(yōu)化的完整知識鏈路。

到此這篇關(guān)于Node.js 與 Webpack 模塊化工程化入門指南教程的文章就介紹到這了,更多相關(guān)Node.js 與 Webpack 模塊化開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論