Node.js和webpack入门-个人学习笔记

Node.js-入门

Node.js基础

 概念

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

  作用

1.编写服务端程序

2.编写数据接口，提供网页浏览资源等等

3.实现 “前端工程化”，为Vue和React等框架做铺垫

  前端工程化-概念

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

（Node.js 是前端工程化的基础（因为 Node.js 可以主动读取前端代码内容））

前端工程化包括：格式化工具、打包工具、压缩工具、转换工具、脚手架工具、自动化部署工具等等

模块

类似插件，封装了方法/属性，本身node里自带

  Node.js 为何能执行 JS？

  首先

浏览器能执行 JS 代码，依靠的是内核中的 V8 引擎（C++ 程序）

  其次

Node.js 是基于 Chrome V8 引擎进行封装（运行环境）

  区别

都支持 ECMAScript 标准语法，Node.js 有独立的 API          //最大区别：Node.js 环境没有 DOM 和 BOM 等操作
 

  开启方法

选择运行文件-右键-在集成终端打开-输入“node 自身文件全名”-cls清空-ctrl+c结束终端运行

---

fs 模块 - 读写文件

  fs 模块概念

封装了与本机文件系统进行交互的方法/属性。

  语法步骤

  1. 加载 fs 模块对象

const fs = require('fs')  
//fs是模块标识符：模块的名字

  2. 写入文件内容

 fs.writeFile('文件路径','写入内容', err =>{

    //写入后的回调函数

  })

  3. 读取文件内容

fs.readFile('文件路径', (err, data) =>{

    //十六进制的内容展示

    //读取后的回调函数

    // data 是 buffer 16 进制数据流对象

    // .toString() 转换成字符串

---

path模块-路径处理

注意

Node.js 代码中，相对路径是根据终端所在路径来查找的，不是用VScode资源管理器查找的，可能无法找到你想要的文件。

需要在Node.js代码中使用 绝对路径 进行查找。

    语法

         1、加载path模块

const path = require('path')

         2、使用 path.join 方法，拼接路径

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

         3、如果需要fs模块读取路径（路径表示为：）

path.join(__dirname, '../test.txt')

说明

         path.join() 会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起。

展示

              path.join('03','dist/js','index.js') 

              结果为：windows:'03\dist\js\index.js'

补充

         __dirname,'模块目录-绝对路径'        //注意：是两个下划线

---

http 模块-创建 Web 服务

步骤

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

     2. 监听 request 请求事件，设置响应头和响应体

     3. 配置端口号并启动 Web 服务

     4. 浏览器请求 http://localhost:3000 测试

     （localhost：固定代表本机的域名）

语法（对照上面）

  1、

     const http = require('http')

     const server = http.createServer()

  2、

     server.on('request', (req, res) => {

          // 设置响应头-内容类型-普通文本以及中文编码格式

          res.setHeader('Content-Type', 'text/plain;charset=utf-8')

          // 设置响应体内容，结束本次请求与响应

          res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')

     })

  3、

     server.listen(端口号, () => {

          console.log('Web 服务启动成功了')

     })

注意

text/plain是普通文本；      

text/html是超文本（包含普通）

  web端口服务

              80/3000/8080： 内容数据、获取数据、网页数据、音频数据

              3306：数据库数据

---

Node.js-模块化

node.js模块化

定义

CommonJS 模块是为 Node.js打包 JavaScript代码的原始方式。Node.js 支持浏览器和其他 JavaScript运行时使用的 ECMAScript模块标准。

（在 Node.js 中，每个文件都被视为一个单独的模块。     简略来说模块化就是每个文件都是一个单独的模块）

概念

项目是由很多个模块文件组成的。

好处

1.提高代码复用性；2.按需加载；3.独立作用域。

使用

需要标准语法导出和导入进行使用——联系彼此模块。

---

标准语法：CommonJS标准

定义文件名

                        utils.js

导出

               module.exports = {}

导入

                require('模块名或路径')

注意

          1.最好util.js文件导出，其它文件导入；

          2.Node.js 默认支持 CommonJS 标准语法。

语法

         1、创建模块

         //在需要导出的文件中创建

         const baseURL = 'http://网址路径'

         const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

         2、导出

         module.exports = {

          url: baseURL,

          arraySum: getArraySum

        }

        3、导入

         //在需要导入的文件输入

         const obj = require('模块名/路径')            
         //obj就等于 module.exports 导出的对象

         //模块名或路径：

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

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

---

ECMAScript 标准：（ES6）

默认和命名的选择

  1、按需加载，使用命名导出和导入

  2、全部加载，使用默认导出和导入

  3、同时用也可以

  一、默认

   默认导出和导入

                  1. 导出：export default {}

                  2. 导入：import 变量名 from '模块名或路径'

 

  语法

  注意

1.Node.js 默认支持 CommonJS 标准语法(Webpack则不同)；

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

       1、创建定义模块

       const baseURL = 'http://网址地址'

       const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

       2、默认导出

       export default {

        url: baseURL,

        arraySum: getArraySum

      }

      3、默认导入

      import obj from '模块名/路径'            
      //obj就等于 export default 导出的对象

注意

        模块名或路径：

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

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

 

  二、命名

      命名标准使用

                  1. 导出：export 修饰定义语句

                  2. 导入：import { 同名变量 } from '模块名或路径'

  语法

  注意

1.Node.js 默认支持 CommonJS 标准语法；

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

       1、创建定义模块 并命名导出

       export const baseURL = '网址地址'

       export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

       2、命名导入（{}里写同名变量）

       import {baseURL, getArraySum} from '模块名/路径'      
       //{baseURL, getArraySum}就等于 export导出的对象

注意

        模块名或路径：

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

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

---

包的概念

概念

将模块，代码，其他资料聚合成一个文件夹。

  分类

       1、项目包：主要用于编写项目和业务逻辑

       2、软件包：封装工具和方法进行使用

  写法

       1、根目录中，必须有（创建） package.json 文件（记录包的清单信息）

       2、在package.json 文件写入

 {
        "name": "cz_utils",                                 //软件包名称
        "version": "1.0.0",                                 //软件包当前版本
        "description": "一个数组和字符串常用工具方法的包",    //软件包的简短描述
        "main": "index.js",                                 //软件包唯一入口点（指定指向文件）
        "author": "xxx",                                //软件包作者
        "license": "MIT"                                    //软件包许可证（商用后可以用作者名字宣传）
 }

注意

1.导入软件包时，引入的默认选择的是 index.js 模块文件 / （没有的话就找）main 属性指定的模块文件；

2.基本上入口和出口都是index.js文件，而index.js文件作用：把所有工具模块方法先集中起来，再统一向外暴露。

index步骤

      (基于CommonJS标准)

      1、将所有的工具模块都 导入 到index.js文件

      2、将对应定义导入 都进行解构赋值（不然会有嵌套问题）

      3、统一导出 所有函数

  （4、在需要导入的文件中使用导入， 导入 utils 软件包，使用里面封装的工具函数，会自动在utils文件夹里找index文件）

---

npm（软件包管理器）

npm

定义

npm 是 Node.js 的标准包管理器。

据报道，在 2022 年 9 月，npm 注册表中列出了超过 210 万个软件包，使其成为最大的单一语言代码存储库，而且你可以确定（几乎）所有一切都有软件包。

它最初是作为一种 “下载和管理 Node.js 包” 依赖的方式，但后来成为前端 JavaScript 中也使用的工具。

使用方法

  1. 初始化清单文件

在终端中输出：  npm init -y  （得到 package.json 文件，如果本身有这个文件则略过此命令）

     注意

创建的包名最好不要有中文，不然初始化时package文件无法初始出信息

  2. 下载软件包 (node_modules)

在终端中输出： npm i 软件包名称  （会从npm资源库下载并自动生成node_modules文件夹，里面包括对应包源码）

（npm 会将对应信息记录到 package.json 中并生成一个package-lock.json文件来固化版本）

  3. 使用软件包（项目文件导入）

npm-安装所有依赖

  问题

           当项目中不包含 node_modules，能否正常运行？

  答案

           不能，缺少依赖的本地软件包

  原因

           因为自己用 npm “下载依赖”比磁盘传递拷贝要“快得多”

  场景

             一般拿到别人的项目后，只有 package.json 缺少 node_modules 时需要做.

  解决方法

项目终端输入命令

                                   npm i

  （下载 package.json 中记录的所有软件包）

 效果

会根据 package.json 记录的所有包和版本开始下载

npm-全局软件包nodemon

软件包包括

             1、本地软件包：当前项目内使用，封装 “属性和方法” ，存在于 node_modules          (如：dayjs、loadash等等)

             2、全局软件包：本机所有项目使用，封装 “命令和工具” ，存在于 “系统设置的位置”

全局软件包nodemon的作用

替代 node 命令，检测代码更改，自动重启程序（不用我们手动结束进程再重启）

注意

          只用封装了 命令 的软件包才能安装到全局环境中

 使用方法

  1. 安装

           （记得看有没有modules，没有就下载）

          终端输入：npm i nodemon -g      //（-g 代表安装到全局环境中）

  2. 运行

                nodemon 待执行的目标 js 文件

           (就是写：nodemon 待执行的目标 js 文件路径)

           （启动后，修改代码，保存后观察终端效果）

 3. 删除软件包

                                //看是否需要

                                npm uni 软件包名

---

Webpack入门-基础运用

Webpack

概念

webpack 是一个用于现代 JavaScript 应用程序的  “静态模块打包工具” 。                      

（本身是全局软件包，使用ECMAScript 标准）

       当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

（webpack默认只识别js代码）

静态模块

指的是编写代码过程中的，html，css，js，图片等固定内容的文件。

打包

把静态模块内容，压缩，整合，转译等（前端工程化）

            整合

     把多个css或js合并到一个文件，减少用户浏览器的http请求次数，更快访问网页

            转译

                  1.把 less / sass 转成 css 代码

                  2.把 ES6+ 降级成 ES5

                  3.支持多种模块标准语法

  终端输入提示

                               1、清理终端显示：cls

                               2、终止终端进程：Ctrl+c

  用法

       1、新建初始化项目

       2、下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令

          2.1终端写入：

 npm i webpack webpack-cli --save-dev        

             

                                   (--save-dev:表明在开发环境下使用)

          2.2自定义命令：在package.json文件中找到  scripts  写入：                

                                    //目的：执行webpack，从而启动打包过程

                                        scripts: {"build":"webpack"}

       3、 运行-打包-命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

           终端输入 打包 命令：

npm run build

---

修改打包入口(entry)和出口(output)

一、入口entry

  入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。

  进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

  默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

  二、出口output

  output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

  主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

  整体步骤

       (Webpack 配置：影响 Webpack 打包过程和结果)

       1、

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

       2、

在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 // 生成打包后内容之前，清空（上一次）输出目录

                  },

                };

       3、

重新打包观察 (终端输入：npm run build)

       注意

只有和入口产生直接/间接的引入关系，才会被打包。

---

HtmlWebpackPlugin

说明

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。

这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。

你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

插件说明

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。

如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的 <script> 标签内引入。

如果在 webpack 的输出中有任何 CSS 资源

（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。

Plugin中的配置含义和作用

1、filename

指定 生成的html下的index网页名字，甚至对应文件夹路径

2、template

配置项：生成的HTML文件以被“指定”的文件作为模板基础

步骤

     1、下载安装插件（终端输入）

        npm install --save-dev html-webpack-plugin

     2、配置：在webpack.config.js 文件下添加

        const HtmlWebpackPlugin = require('html-webpack-plugin');

        （在module.exports 里添加）

       plugins: [new HtmlWebpackPlugin({

        template: path.resolve(__dirname, 'public/login.html'),    //模板文件

        filename: path.resolve(__dirname, 'dist/login/index.html'),  //输出文件

      }

      )],

     3、配置：在package.json中添加

         plugins: [

         new HtmlWebpackPlugin({

          title: '标题名',

          filename: 'assets/admin.html'

        })

        ]

     4、重新打包观察效果

---

webpack打包css代码（加载器）

css加载器

1.加载器 css-loader：解析 css 代码

2.加载器 style-loader：把解析后的 css 代码插入到 DOM

    步骤

    1.准备

准备 css 文件代码引入到 src/login/index.js 中（压缩转译处理等）

    2. 下载

下载 css-loader 和 style-loader 本地软件包

       终端下载输入：

                   npm install --save-dev css-loader style-loader

    3. 配置

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

       （1）在你的file.js文件中引入css文件即：

 import css from 'file.css';

            在你的component.js文件中引入css文件即：

import './style.css';

        (2)在config.js文件中添加：

test：匹配结尾为css的文件（i：忽略大小写）；use：按顺序使用对应加载器（从后往前）           

module: {

              rules: [

              {

                test: /\.css$/i,

                use: ['style-loader', 'css-loader'],

              },

              ],

            },

    4. 打包后观察效果

注意

(可以添加bootstrap样式：

1、先下载npm i bootstrap；2、之后在index文件中import 'bootstrap/dist/css/bootstrap.min.css'）

---

 优化提取css代码-插件 mini-css-extract-plugin

作用

        提取 css 代码

含义

会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

好处

          css 文件可以被浏览器缓存，减少 js 文件体积

注意

          不能和 style-loader 一起使用(它为了一起打包，而plugin插件是为了独立出来打包)

   与 extract-text-webpack-plugin 相比

   1、异步加载

   2、没有重复的编译（性能）

   3、更容易使用

   4、特别针对 CSS 开发

   步骤

   1. 下载

     下载 mini-css-extract-plugin 本地软件包

      终端输入：

npm install --save-dev mini-css-extract-plugin

      （建议 mini-css-extract-plugin 与 css-loader 一起使用。）

   2. 配置

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

      （1）在config.js配置文件中添加：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

      （2）在module.exports 中的module 中的 rules中添加 ：

use: [MiniCssExtractPlugin.loader, "css-loader"],

      （3）最后在上面 plugin（模板和输出）位置的末尾添加：

new MiniCssExtractPlugin()
//生成css文件

   3. 打包后观察效果

---

优化压缩css代码-插件

说明

引用别人的css代码是压缩好的，而自己的css 代码提取后没有压缩，需要自己利用插件进行优化压缩。

步骤

    1. 下载

       下载 css-minimizer-webpack-plugin 本地软件包

       终端输入：

npm install css-minimizer-webpack-plugin --save-dev

    2. 配置

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

      （1）在config.js 文件中添加：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

      （2）在module.exports中添加 “优化”：

optimization: {},

      （3）在上一步的 optimization: {}中添加“最小化”：           

minimizer: [

           // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释

           `...`,

           new CssMinimizerPlugin(),

           ],

    3. 打包重新观察

---

打包less代码-加载器

加载器 less-loader

                                  把 less 代码编译为 css 代码。

  注意

              less-loader 需要配合 less 软件包使用。

  步骤

  1. 新建

      新建 less 代码（设置背景图）并引入到 src/login/index.js 中

  2. 下载

      下载 less 和 less-loader 本地软件包

     在终端输入：

 npm install less less-loader --save-dev

  3. 配置

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

     在config.js配置文件中的 module 中的rule 中添加：     

{

        test: /\.less$/i,

        use: [

          // compiles Less to CS

          //不能跟上面的MiniCss混用

          MiniCssExtractPlugin.loader,

          'css-loader',

          'less-loader',

        ],

      },

  4. 打包后观察效果

---

打包图片-资源模块

资源模块

Webpack5 内置资源模块（字体，图片等）打包，是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader加载器。

解释

  在 webpack 5 之前，通常使用：

  1.raw-loader 将文件导入为字符串

  2.url-loader 将文件作为 data URI 内联到 bundle 中

  3.file-loader 将文件发送到输出目录

  资源模块类型(asset module type)

添加 4 种新的模块类型，来替换所有这些 loader：

  1、asset/resource  ：发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

  2、asset/inline  ：导出一个资源的 data URI。之前通过使用 url-loader 实现。

  3、asset/source  ：导出资源的源代码。之前通过使用 raw-loader 实现。

  4、asset  ：在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

 资源模块步骤

 （记得在js文件中引入和创建）

 1. 配置

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

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

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

 (3) 占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效，转成js失效）

 在config.js配置文件中的module 中的 rule 中添加： 

{

       test: /\.(png|jpg|jpeg|gif)$/i,

       type: 'asset',                          //判断打包类型asset还是resourse

       generator: {

         filename: 'asset/[hash][ext][query]'   //输出位置

       }

    }

 2. 打包后观察效果和区别

 注意

判断临界值默认为 “8KB”

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

 2.小于 8KB 文件：导出一个 data URI（base64字符串）    //转64会使文件大一些，不符打包原理，所以小的转，大的直接URL地址

 注意

js 中引入本地图片资源要用 import 方式，不然识别不了，被转成字符串（如果是网络图片http地址，字符串可以直接写）

---

搭建开发环境

问题

          之前改代码，需重新打包才能运行查看，效率很低

解决方法

（开发环境） 配置开发工具 webpack-dev-server 快速开发应用程序

作用

           启动 Web 服务，自动检测代码变化， “热更新” 到网页

注意

          dist 目录和打包内容是在内存里（更新快）

  步骤

  1. 下载

     下载 webpack-dev-server 软件包到当前项目

     终端输入：

npm install --save-dev webpack-dev-server

  2. 设置和配置

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

    （1）开发模式：在config.js文件中的module.experts中添加：  

mode: 'development',       
//必须

    （2）（可不写）然后在plugins 里面的HtmlWebpackPlugin里添加：

title: 'Development',   
//非必须
//（如果添加就删除：title: 'Output Management',）

    （3）自定义命令：在package.json中的scripts 中添加 ：

"dev":"webpack serve --open"     
//（--open：自动弹出浏览器）    
//必须

    （4）（可不写）配置告知 webpack-dev-server 将 dist 目录下的文件作为可访问资源部署在 localhost:8080：（也写在module.experts中）

devServer: {static: './dist',},

  3. 启动开发服务器，试试热更新效果

     终端输入：

npm run dev

  注意

      1、devServer.static默认是‘public’文件夹，即默认以 public 文件夹作为服务器根目录；（要设置上面有）

      2、webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务；

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

      （也就是有两个根目录：dist和public，自己加地址可以访问dist中的打包文件）

---

打包模式-开发和生产

说明

提供 mode 配置选项，告知 Webpack 使用相应模式的内置优化

模式

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等(反应快)	本地开发
生产模式	production	极致压缩代码，资源优化，更轻量等（体积小）	打包上线

差异

  development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。

  1.开发环境中，我们需要:强大的source map 和一个有着live reloading(实时重新加载)或hot module replacement(模块热替换)能力的localhost server。

  2.生产环境中，关注点在于压缩bundle、更轻量的source map、资源优化等，通过这些优化方式改善加载时间。     （可以认为是上线）

  由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

  设置方式

 （两种模式都用下列方法）

  方式1

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

         即module.experts中添加：  

mode: 'development',

 或者  

mode: 'production',

  方式2

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

         即在script中添加：

"build": "webpack --mode: development" 
//或者 
"webpack --mode=production"
//之后改成development，css会内嵌

         即在script中添加：

"dev": "webpack serve --mode: development"或者 "webpack serve --mode=production"

  注意

命令行设置的优先级高于配置文件中的，推荐用命令行设置  （也就是方式二优先级大于方式一）

  打包模式的应用

  需求

在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

  （说白了就是判断现在是开发模式还是生产模式，从而执行不同代码将css内嵌，加快响应）

说明

  开发模式：style-loader 内嵌 css 代码在 js 中，让热替换更快

  生产模式：提取 css 代码，让浏览器缓存和并行下载 js 和 css 文件

  解决方法

  方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

  方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境               //优先

  步骤

  1. 下载

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

     终端输入：npm i cross-env --save-dev

  2. 配置

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

     在package.json 中的“build”和“dev” 中添加： (上)cross-env NODE_ENV=prodection   和 （下）cross-env NODE_ENV=development

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

  4. 重新打包观察两种配置区别

  方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

  process.env.NODE_ENV说明

  process.env.NODE_ENV 是一个 “全局变量”，用来表示当前的环境是development还是production。

  在webpack的配置文件中，我们可以根据这个变量来决定一些构建时的行为，比如是否压缩代码、是否启用一些调试工具等。

  （很有用，可以判断本身环境变量，从而实现更换服务器和接口地址等等操作）

---

注入环境变量-DefinePlugin插件

需求

前端项目中，让“开发模式”（development）下打印语句生效，让“生产模式”（production）下打印语句失效

问题

（打包模式）cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 全局变量process.env.NODE_ENV

（process.env.NODE_ENV 是一个 “全局变量”，用来表示当前的环境是development还是production）

解决

使用 Webpack “内置”的 DefinePlugin 插件。（也就是不用下载了）

作用

在编译时，将前端代码中匹配的变量名，替换为值或表达式。（其实就是创建全局变量，后续代码根据它做出一些行为）

  步骤

（都在config.js中设置）

       1、顶端导入定义

 const webpack = require('webpack')                
//定义webpack对象，从而接收webpack常量

       2、添加

在 plugins的 MiniCssExtractPlugin的下一行添加：

new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})

       3、判断

在index.js文件 或者 入口文件最上面添加判断：         

if (process.env.NODE_ENV === 'production') {

            //失效：给console.log赋予一个空函数

            console.log = function () { }

          }

          //开发模式打印，生产模式会失效不打印下面

          console.log('开发好用，生产失效')

---

开发环境调错-source map

问题

代码在打包时处于被压缩和混淆的状态，无法正确定位源代码位置（行数和列数）

解决方法

启动 webpack 的 source-map 资源地图功能

说明

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

步骤

在webpack.config.js 配置 devtool 选项

        即在config.js文件中的 module.exports 中添加：

 devtool:'inline-source-map'

  说明

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

  注意

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

  更优步骤：（仅在开发环境出现）

           1、定义

将config.js中的 module.exports定义给常量：

 const config ={}    //将module.exports替换成const config

           2、判断

在const config外（后面）添加判断：         

 // 开发环境下使用 sourcemap 选项

if (process.env.NODE_ENV === 'development') { config.devtool = 'inline-source-map' }

           3、赋值

最后重新赋值给module.exports：

module.exports = config

---

解析别名-alias

解析别名-alias

  （webpack内置的配置模块）

配置模块如何解析，创建 import 引入路径的别名，来确保模块引入变得更简单

（简单点认为就是用“解析别名”来替代路径名，省略了写大量路径地址的麻烦）

  例如

原来路径如图，比较长而且相对路径不安全

  解决

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

  步骤

       在config.js的 module.exports中添加：         

 //解析

resolve:{

//别名

alias:{

//前一个引号内的是自定义的别名字符串，后一个代表要替换的路径

'@': path.resolve(__dirname, 'src')

  }

}

  注意

自定义的别名字符串最好用“@”（后续Vue脚手架会用到），别名替换代表的是“绝对路径”

---

优化-生产模式下使用CDN

CDN定义

CDN (内容分发网络) 指的是一组分布在各个地区的服务器。

这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。CDNs 提供快速服务，较少受高流量影响。

使用场景

CDNs 被广泛用于传输 stylesheets 和 JavaScript 等静态资源，像 Bootstrap，Jquery 等。

作用

把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

好处

1.减轻服务器请求压力; 2.就近请求物理延迟低; 3.配套缓存策略; 4.缩小项目体积

免费CDN网站

                          unpkg.com ；cdn.bootcdn.net

需求

“开发模式”下载使用本地第三方库，“生产模式”（产品上线）下使用 CDN 加载引入

理由

上线后用户使用时直接CDN加速请求载入，代码打包不会携带第三方代码，整体体积可以缩小。

注意

不能依赖CDN，不然CDN服务器出故障直接影响你的网站

  步骤

1.引入和判断

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

  （1）在HTML 的文件 head里（最好title后）添加：     （当它为true时引用这个地址） 

 <% if(htmlWebpackPlugin.options.useCdn){ %>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">

    <% } %>

  （2）还有在最下面script 的前后都要添加这个if判断模板

2. 配置

配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）（把import语句的包变成全局变量）

   在config.js 中的 if判断是否为开发模式下面 再添加：   

// 生产环境下使用相关配置

   if (process.env.NODE_ENV === 'production') {

  // 外部扩展（让 webpack 防止 import 的包被打包进来）

  config.externals = {

    //写法：'key': 'value'

    // key：import from 语句后面的字符串

    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）

    //例如

    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',

    'axios': 'axios',

    'form-serialize': 'serialize',

    '@wangeditor/editor': 'wangEditor'

  }

}

3.配置输出

配置输出-出口对应内容。

   在config.js-module.exports（也就是config）-plugins-HtmlWebpackPlugin 中添加：   

useCdn: process.env.NODE_ENV === 'production', 
// 生产模式下使用 cdn 引入的地址

chunks: ['login'] 
// 引入哪些打包后的模块（和 entry 的 key 一致）

4. 两种模式下打包观察效果

  拓展-模板引擎语法

概念

  在Webpack中，我们通常使用模板引擎来处理HTML文件，可以帮助我们更方便地生成HTML文件，并可通过插件和加载器来自动处理这些模板文件。

常见种类

  其中常见的模板引擎语法有以下几种：

  1、EJS（Embedded JavaScript）

EJS是一种简单而强大的模板引擎，它允许在HTML中嵌入JavaScript代码。          //常用

    在Webpack中使用EJS时，可以通过以下语法来使用变量和控制流：

    <%= $ variable %>：用于输出变量的值。

    <% if (condition) { %>：用于控制流，如if语句。

    <% for (var i=0; i < array.length; i++) { %>：用于控制流，如for循环。

  2、Handlebars

Handlebars是另一个流行的模板引擎，它使用{{}}来标记变量和控制流，例如：

  {{ $ variable }}：用于输出变量的值。

  {{#if condition}}：用于控制流，如if语句。

  {{#each array}}：用于控制流，如遍历数组。

  3、Pug（以前称为Jade）

Pug是一种简洁的模板引擎，它使用缩进来表示层次结构，例如：

  div：表示一个<div>元素。

  p：表示一个<p>元素。

  #id：表示元素的id。

  .class：表示元素的class。

---

优化-分割公共代码

说明

把 2 个以上页面引用的公共代码提取出来。

单独存放，不影响功能使用，减小体积。
 

步骤

1. 配置

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

   在 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. 打包观察效果