首页 Vue2

# 前端工程化

# 前端开发模式

  • 模块化（js 的模块化、css 的模块化、资源的模块化）
  • 组件化（复用现有的 UI 结构、样式、行为）
  • 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
  • 自动化（自动化构建、自动部署、自动化测试）

# 前端工程化概念

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

企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的

# 前端工程化解决方案

主流方案

  • webpack
  • parcel

# webpack 基本使用

# webpack 介绍

# 概念

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

# 功能

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

# 好处

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

# 创建项目步骤

  • 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
  • 新建 src 源代码目录
  • 新建 src -> index.html 首页和 src -> index.js 脚本文件
  • 初始化首页基本的结构
  • 运行 npm install jquery –S 命令，安装 jQuery
  • 通过 ES6 模块化的方式导入 jQuery

# 在项目中安装 webpack

npm i webpack@5.42.1 webpack-cli@5.5.0 -D

# 在项目中配置 webpack

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

module.export = {
    //mode 用来指定构建模式 development production
    mode: 'development'
}

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

"scripts": {
    //scripts 下的脚本，通过 npm run 执行 npm run dev
    "dev": "webpack"
}

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

# mode 的可选值

# development

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

# production

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

# webpack.config.js 文件作用

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

# webpack 中默认值

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

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

# 自定义打包的入口出口

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

const path = require('path');
module.exports = {
    entry: path.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 页面的内容

# webpack-dev-server

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

# 安装 webpack-dev-server

npm i webpack-dev-server@3.11.2 -D

# 配置 webpack-dev-server

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

"scripts": {
    "dev": "webpack serve"
}

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

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

# 打包生成的文件在哪

  • 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
    • 严格遵守开发者在 webpack.config.js 中指定配置
    • 根据 output 节点指定路径进行存放
  • 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
    • 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
    • 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

# webpack 生成内存中的文件访问方式

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的

  • 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件

# html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容

# 安装 html-webpack-plugin

npm i html-webpack-plugin@5.5.0 -D

# 配置 html-webpack-plugin

const HtmlPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlPlugins({
    template: './src/index.html',
    filename: './index.html',
})
moudle.exports = {
    mode: 'development',
    plugins: [htmlPlugin],
}

# 解惑 html-webpack-plugin

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

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

# devServer 节点

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

devServer: {
    open: true,
    host: '127.0.0.1',
    port: 80,
}

# webpack 中的 loader

# loader 概述

# 概念

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

# loader 加载器作用

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

# loader 调用过程

image-20230110163437188

# 打包处理 css 文件

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

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

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

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

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

# 打包处理 less 文件

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

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

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

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

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

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

module: {
    rules: [
        {test: /\.jpg|png/,use: 'url-loader?limit=22222'}
    ]
}

loader 参数

  • limit 指定图片大小，单位 byte
  • 只有小于 limit 大小的图片，才会被转换为 base64 格式

# 打包处理 js 文件高级语法

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

function info(target) {
    target.info = 'Person info';
}
@info
class Person{}
console.log(Person.info);

# 安装 babel-loader 相关包

运行： npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

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

{test: /\.js$/, use: 'babel-loader',exclude: /node_modules/}

# 配置 babel-loader

在项目根目录，创建名为 babel.config.js 的配置文件

module.exports = {
    plugins: [['@babel/plugin-proposal-decorators',{ legacy: true}]]
}

# 打包发布

# 打包的目的

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

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化，为了让项目能够在生产环境中高性能的运行

# 配置 webpack 的打包发布

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

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
}

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

# 把 JavaScript 文件统一放入 js 目录

在 webpack.config.js 配置文件的 output 节点中

output: {
    path: path.join(__dirname,'dist'),
    filename: 'js/bundle.js',
}

# 把图片文件统一到 image 目录

{
    test: /\.jpg/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 470,
            outputPath: 'image',
        }
    }
}

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

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

// 安装 webpack 插件 npm i clean-webpack-plugin -D
// 导入插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
plugins: [htmlPlugin,cleanPlugin],

# Source Map

# 生成环境的问题

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率，与此同时对压缩混淆之后的代码除错（debug）是一件极其困难的事情

# Source Map 介绍

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

# webpack 开发环境下的 Source Map

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

image-20230111104232291

# 默认 Source Map 的问题

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

image-20230111104349305

# 解决默认 Source Map 问题

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

module.exports = {
    mode: 'development',
    devtools: 'eval-source-map',
}

# 生产环境下的 SourceMap

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

image-20230111104553451

# 只定位行数不暴露原码

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

image-20230111104634235

# Source Map 最佳实践

  • 开发环境下
    • 建议把 devtool 的值设置为 eval-source-map
    • 好处：可以精准定位到具体的错误行
  • 生产环境下
    • 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
    • 好处：防止源码泄露，提高网站的安全性
更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

Baozi 微信支付

微信支付

Baozi 支付宝

支付宝

Baozi 微信

微信