前端工程化

2023-12-22 12:27:46

前端工程化

什么是前端工程化？

把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

好处：前端开发自成体系，有一套标准的开发方案和流程。

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

Wabpack

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

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

webpack 使用

一、创建列表隔行变色项目：

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

二、安装webpack包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

三、配置webpack

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

module.exports = {
  mode: 'development',  // mode 代表 webpack运行的模式，可选值有两个development和 production
  },

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

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

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

mode可选值

mode 代表 webpack 运行的模式，可选值有两个 development 和 production

开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快

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 = {
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },

webpack 中的插件

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

常用插件

(1). webpack-dev-server 修改源代码后自动打包

安装：

npm install webpack-dev-server@3.11.2 -D

配置：

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

再次运行 npm run dev 命令，重新进行项目的打包,此时webpack-dev-server 会启动一个实时打包的 http 服务器,在浏览器中访问 http://localhost:8080 地址，查看自动打包效果。

打包生成的文件哪儿去了？

不配置 webpack-dev-server 的情况下，打包生成的文件，会存放到实际的物理磁盘上
配置了之后,打包生成的文件存放到了内存中。

生成到内存中的文件该如何访问？

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

例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件。

(2). html-webpack-plugin自定制 index.html 页面的内容

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

安装：

npm install html-webpack-plugin@5.3.2 -D

配置：

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})
module.exports = {
    mode: 'development',
     plugins: [htmlPlugin], // 3.通过plugins节点，让插件生效
}

解惑 html-webpack-plugin

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

devServer 节点

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

devSever:{
	open: true, // 初次打包完成后，自动打开浏览器
	host: '127.0.0.1',  // 实时打包使用的主机地址
	port: 80,  // 端口号
}

修改配置文件必须重启才能生效！！！

webpack 中的 loader

非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错。

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

loader 的调用过程

打包处理 css 文件

安装插件：

npm i style-loader@3.0.0 css-loader@5.2.6 -D

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

module: {
    rules: [   // 所有第三方文件模块匹配规则
        // 定义了不同模块对应的 loader
        { 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: [   // 所有第三方文件模块匹配规则
        // 定义了不同模块对应的 loader
        { test: /\.css$/, use: ['style-loader', 'css-loader','less-loader'] },
    ]
}

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

安装：

npm i url-loader@4.1.1 file-loader@6.2.0 -D

配置：

module: {
    rules: [   
      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
    ]
}

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

limit 用来指定图片的大小，单位是字节（byte）
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

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

安装：

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

配置：

module: {
    rules: [   
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性，不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    ]
}

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

module.exports = {
  // 声明 babel 可用的插件
  // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

完整配置：

const path = require('path')

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
  // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
  // devtool: 'eval-source-map',
  // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
  // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
  // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },
  // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin, new CleanWebpackPlugin()],
  devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在 http 协议中，如果端口号是 80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性，不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  resolve: {
    alias: {
      // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
      '@': path.join(__dirname, './src/')
    }
  }
}

打包发布

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

 "scripts": {
    "dev": "webpack serve", // 开发环境中，运行dev命令
    "build": "webpack --mode production"  // 项目发布时使用biild命令
  },

–model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项

js 文件统一生成到 js 目录中

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

output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },

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

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

// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },

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

Source Map 问题

代码定位问题和防止代码泄露.

Source Map 的最佳实践 ①

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

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

module.exports = {
  // devtool: 'eval-source-map',
  devtool: 'nosources-source-map',
  mode: 'development',

码农公寓

前端工程化

什么是前端工程化？

Wabpack

webpack 使用

mode可选值

webpack 中的默认约定

自定义打包的入口与出口

webpack 中的插件

常用插件

打包生成的文件哪儿去了？

生成到内存中的文件该如何访问？

devServer 节点

webpack 中的 loader

loader 的调用过程

打包处理 css 文件

打包处理 less 文件

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

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

打包发布

js 文件统一生成到 js 目录中

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

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

Source Map 问题

相关文章