前端工程化之webpack

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

⚫ 模块化（js 的模块化、css 的模块化、资源的模块化）

⚫ 组件化（复用现有的 UI 结构、样式、行为）

⚫ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）

⚫ 自动化（自动化构建、自动部署、自动化测试）

（一）webpack基本使用

---

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

案例：

创建列表隔行变色项目
① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery –S 命令，安装 jQuery
//Dependencies 节点 存开发阶段和上线阶段用到的包
⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
     import $ from 'jquery'  //从jquery导入一个成员
     如果某个模块中，使用from接受到的成员为undefined，则没必要进行接受
     即可理解 let $ = 'jquery'里面的接口内容

注：需要安装node和npm

1.安装 webpack

npm i webpack -g  //全局安装
npm i webpack-cli -g
===多个包可以一起安装
npm i webpack webpack-cli -g

在终端运行如下的命令，安装 webpack 相关的两个包：(@固定版本号)
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
//-D 在package.json记入devDependencies 节点 
//devDependencies 节点 只存开发阶段用到的包

注：webpack安装必须在项目创建之后进行

2.配置 webpack

• 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode:'development'  //mode 用来指定构建模式。可选值有development 开发和production 上线
}

mode 节点的可选值有两个，分别是：

① development

⚫ 开发环境

⚫ 不会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度快，适合在开发阶段使用

② production

⚫ 生产环境

⚫ 会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度很慢，仅适合在项目发布阶段使用

• 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
    "dev":"webpack" //script 节点的脚本，可以通过npm run执行
  }

• devServer 节点（选用）

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，

示例代码如下：

module.exports = {
    mode:'development',
    open:true, //初次打包完成后，自动打开浏览器
    host:'127.0.0.1', //实时打包所使用的主机地址
    port:8080, //实时打包所使用的端口号
}

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

• 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定

自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下

const path = require('path') //导入node.js中路径模块

module.exports = {
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'main.js' //输出文件的名称
    }
}

（二）webpack中的插件

---

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的

webpack 插件有如下两个：

① webpack-dev-server

⚫ 类似于 node.js 阶段用到的 nodemon 工具

⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建

安装
npm install webpack-dev-server -D
​
配置 webpack-dev-server
//修改 package.json -> scripts 中的 dev 命令如下：
 "scripts": {
    "dev": "webpack serve"，  
  }
再次运行 npm run dev 命令，重新进行项目的打包  停掉服务  2次 ctrl+v
在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
⚫ 严格遵守开发者在 webpack.config.js 中指定配置
⚫ 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
⚫ 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
⚫ 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
注：出现cannot 数据

在webpack.config.js中添加下列代码
devServer: {
     // contentBase: __dirname, -- 请注意，这种写法已弃用
     static: {
         directory: path.join(__dirname, "/")
     }
 }
//例如
const path =require("path")
​
module.exports = {
 mode:'development',
 devServer: {
     static: {
         directory: path.join(__dirname, "/")
     }
 }
}

② html-webpack-plugin

⚫ webpack 中的 HTML 插件（类似于一个模板引擎插件）

⚫ 可以通过此插件自定制 index.html 页面的内容

通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

• 安装

npm install html-webpack-plugin -D

• 配置

//1.导入html插件，得到一个构造函数
const HtmlPlugin = require("html-webpack-plugin")
​
//2.创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:"./src/index.html", //指定原文件的存放路径
    filename:"./index.html",//指定生成文件的存放路径
})
module.exports = {
    mode:'development',
    plugins:[htmlPlugin], //3.挂载，通过plugins节点，使htmlplugin插件生效
    devServer: {
        static: {
            directory: path.join(__dirname, "/")
        }
    }
}

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

（三）webpack 中的 loader

---

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

⚫ css-loader 可以打包处理 .css 相关的文件

⚫ less-loader 可以打包处理 .less 相关的文件

⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

（1）打包处理 css 文件

//导入样式(webpack中，一切皆模块，都可以通过es6导入语法)
import "./css/index.css" 

① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module.exports = {
    
    module: {//所有第三方文件模块的匹配规则
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    },
   
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

⚫ use 数组中指定的 loader 顺序是固定的

⚫ 多个 loader 的调用顺序是：从后往前调用

（2）打包处理 less 文件

//导入样式(webpack中，一切皆模块，都可以通过es6导入语法)
import "./css/index.less" 

① 运行 npm i less-loader less -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
    
    module: {//所有第三方文件模块的匹配规则
        rules: [
            { test: /\.less$/, use: ['style-loader', 'css-loader',"less-loader"] }
        ]
    },
   
}

（3）打包处理样式表中与 url 路径相关的文件（图片）

① 运行 npm i url-loader file-loader -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
    
    module: {//所有第三方文件模块的匹配规则
        rules: [
            { test: /\.jpg|png|gif$/, use: ['url-loader'] }
        ]
    },
   
}

其中 ? 之后的是 loader 的参数项：'url-loader?limit=1024'

⚫ limit 用来指定图片的大小，单位是字节（byte）

⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

//导入图片，得到图片文件
import web from "./img/web前端技能树.png"
//给img标签的src动态复制
$(".box").attr("src",web)

• 新方法

该方法不需要在js文件中import 变量名 from 图片路径

rules: [
            { test: /\.jpg|png|gif$/,
            type:"asset/resource",
            //配置后，只会在build生成dist目录时，才会将处理的图片放置在img中
            generator:{
                filename:"img/[name].[hash:4][wxt]"
            }
            },
            //处理htnl中的img，这个必须有，但是file-loader可以被上面的代替
            text:/.html$/,
            use:'html-loader'
        ]

（4） 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

• 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module.exports = {
    
    module: {//所有第三方文件模块的匹配规则
        rules: [
            { test: /\.js$/, use: ' babel-loader',exclude:/node_modules/ }
        ]
    },
   
}

• 配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
    //声明babel可用插件
    plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}

（四）打包

---

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

1.配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production" //项目发布时，npm run build
  },

--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

2.把 JavaScript 文件统一生成到 js 目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

output:{
 path:path.join(__dirname,"dist"),
 filename:"js/main.js"
}

3.把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

module.exports = {
    
    module: {//所有第三方文件模块的匹配规则
        rules: [
            { test: /\.jpg|png|gif$/, 
            //多个参数之间，使用&符号进行分割
            //use:"url-loader?limit=1024&outputPath=img"
            use: {
                loader:'url-loader',
                options:{
                    limit:1024,
                    //明确指定打包生成的文件，存储到dist目录下的img文件夹下
                    outputPath:'img'
                }
            },
            }
        ]
    },
   
}

4.自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

//安装插件
npm install clean-webpack-plugin -D

//配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

plugins:[htmlPlugin,cleanPlugin] //挂载插件

（五）Source Map

---

1. 生产环境遇到的问题

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：

对压缩混淆之后的代码除错（debug）是一件极其困难的事情

2. 什么是 Source Map

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

⚫ 精准定位到错误行并显示对应的源码

⚫ 方便开发者调试源码中的错误

3.解决默认 Source Map 的问题

在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码.

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
    mode: "development",
    devtool:"eval-source-map"
}

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map。

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为 source-map。

4.Source Map 的最佳实践

① 开发环境下：

⚫ 建议把 devtool 的值设置为 eval-source-map

⚫ 好处：可以精准定位到具体的错误行

② 生产环境下：

⚫ 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map

⚫ 好处：防止源码泄露，提高网站的安全性