前端工程化与WebPack

前端工程化

前端开发：

模块化：js的模块化、css的模块化、其他资源的模块化

组件化：复用现有UI结构、样式、行为

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

自动化：自动化构建、自动部署、自动化测试

前端工程化：

在企业级项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终实现前端的四个现代化

优势：

让前端开发能够“自成体系”，覆盖前端项目从创建到部署的方方面面
最大程度提升了开发效率。降低了技术选型、前后端联调等带来的协调沟通成本

前端工程化的解决方案：

Webpack（https://webpack.js.org/）
Parcel（https://parceljs.org/）

Webpack

1、webpack的基本使用

1.1概念

Webpack是前端项目工程化的具体解决方案

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

优势：将工作中心放到具体功能的实现上，提高前端开发效率和项目的可维护性

1.2创建列表隔行变色项目

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json 注意：实在项目未开始时先执行的操作

② 新建 src 源代码目录

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

（1）在项目中安装webpack

终端运行 npm install webpack@5.5.1 webpack-cli@4.2.0 -D

（2）在项目中配置webpack

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

module.exports = {

mode: 'development'

}

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

/* script节点下的脚本，可以通过 npm run 执行 */ 如 npm run dev

"scripts": {

"dev": "webpack"

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

1.2.1 mode的可选值：

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

① development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

② production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

1.2.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

1.3 打包的入口与出口

在 webpack 中有如下的默认约定：

① 默认的打包入口文件为src -> index.js

② 默认的输出文件路径为dist -> main.js

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

const path = require('path')

module.exports = {

entry: Path2D.join(__dirname, './src/index.js'),

output: {

path: path.join(__dirname, './dist'),

filename: 'bundle.js',

}

webpack插件的使用

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

① webpack-dev-server

类似于 node.js 阶段用到的 nodemon 工具
每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

webpack 中的 HTML 插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html 页面的内容

2.1 webpack-dev-server

2.1.1 安装与运行webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

安装：npm install webpack-dev-server@4.7.4 -D
配置：

修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {

"dev": "webpack serve"

再次运行 npm run dev 命令，重新进行项目的打包

注意：运行出错时，可能由于webpack-cli的版本太低了，需要使用最新版本。

问题解决方案：通过命令npm uninstall webpack-cli卸载依赖包webpack-cli。再通过命令npm i webpack-cli -D安装最新版webpack-cli依赖包。

在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：网址打不开时在webpack.config.js增加如下配置：

module.exports = {

devServer: {

static: "./dist"

}

2.1.2 打包生成的文件

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

⚫ 严格遵守开发者在 webpack.config.js 中指定配置

⚫ 根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上

⚫ 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

可以直接将导入的js文件写成如下形式，则可以使页面进行刷新：

2.1.3 devServer 节点

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

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

2.2html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份

2.2.1安装与运行安装 html-webpack-plugin

安装：npm i html-webpack-plugin@4.5.0 -D
配置：

const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件的实例对象

const htmlPlugin = new HtmlPlugin({

template: './src/index.html',

filename: './index.html',

})

module.exports = {

plugins: [htmlPlugin],

}

注意：

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到内存中

② HTML 插件在生成的 index.html 页面的底部，自动注入了打包的 bundle.js 文件

3、webpack 中的 loader

3.1 loader 概述

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

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

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

3.2打包处理 css 文件

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

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

module: {

rules: [

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

]

}

注意：

Use数组中指定的loader顺序是固定的
多个loader的调用顺序是从后往前调用

3.3打包less文件

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

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

module: {

rules: [

{ test: /\.less$/, use: ['style-loader', 'css-loader', ‘less-loader’] }

]

}

3.4打包处理样式表中与 url 路径相关的文件

3.4.1安装与配置

注意：版本问题，目前不安装也可以使用

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

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

module: {

rules: [

{ test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229’] }

]

}

其中 ? 之后的是 loader 的参数项：

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

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

3.4.2 loader 的另一种配置方式

带参数项的 loader 还可以通过对象的方式进行配置：

{

test: /\.less$/,

use: {

loader: 'url-loader',

options: {

limit: 22229,

3.5打包处理 js 文件中的高级语法

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

3.5.1安装与配置babel-loader

① npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D

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

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

plugins: ['@babel/plugin-proposal-class-properties'],

4、打包发布

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

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

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

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

4.1配置 webpack 的打包发布

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

"build": "webpack --mode production" //项目发布时运行bulid命令

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

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

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

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

output: {

path: path.join(__dirname, 'dist'),

filename: 'js/bundle.js',

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

在每次打包发布时自动清理掉 dist 目录中的旧文件

安装clean-webpack-plugin 插件：npm install clean-webpack-plugin
配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const cleanPlugin = new CleanWebpackPlugin()

plugins: [htmlPlugin, cleanPlugin],

4.4企业级项目的打包发布

企业级的项目在进行打包发布时，远比刚才的方式要复杂的多，主要的发布流程如下：

生成打包报告，根据报告分析具体的优化方案
Tree-Shaking
为第三方库启用 CDN 加载
配置组件的按需加载
开启路由懒加载
自定制首页内容

5、Source Map

生产环境遇到的问题：前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情。

5.1概念

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

5.2 webpack 开发环境下的 Source Map

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

存在问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

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

5.3webpack 生产环境下的 Source Map

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能防止原始代码通过 Source Map 的形式暴露给别有所图之人。

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool 的值设置为nosources-source-map。采用此选项后：你应该将你的服务器配置为，不允许普通用户访问source map 文件！

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

5.4Source Map 的最佳实践

① 开发环境下：

建议把 devtool 的值设置为 eval-source-map
好处：可以精准定位到具体的错误行

② 生产环境下：

建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
好处：防止源码泄露，提高网站的安全性

实际开发中不需要自己配置 webpack

⚫ 实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目

⚫ 开箱即用，所有 webpack 配置项都是现成的！

⚫ 我们只需要知道 webpack 中的基本概念即可！